# Overlay Nav

Overlays the main navigation bar over the top of the first `<section>` of content.

###

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

- Declare the following import statement in `js/mrare/index.js`. This ensures that the initializer code is included in the `theme.js` bundle.

      import mrCountdown from './overlay-nav';

- Ensure the following line appears in the `export` object:

      export {
      mrOverlayNav,
      };

###

Basic Usage

This plugin makes it easy to create a `nav.navbar` overlaying the first section, commonly used when the nav bar has a transparent background. This takes the `<nav>` out of the page flow and pulls the first section up under the nav bar. Space is added at the top of the first section to accomodate the nav bar height.

Add attribute `data-overlay` to the page's main `nav.navbar`. Add attribute `data-overlay` to the first `<section>` in your page content.

Your `<nav>` must match the following selector: `body > div.navbar-container > nav[data-overlay]`index.js`

The basic heirarchy is shown below:

    <body>
      <div class="nav-container">
        <nav class="navbar" data-overlay>
           ...
        </nav>
      </div>
      <section data-overlay>
        ...
      </section>

      ...

There are no options for this plugin as it performs a single function.

Necessary height adjustments are made efficiently upon resizing of the page.

See Also: This functionality works well with our Sticky plugin.