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.