CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Hiding Navigation

A Navigation that hides automatically when the user scrolls down, and is revealed when the user scrolls back up.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How To

The Hiding Navigation component is a navigation that auto-hides when the user scrolls down (to leave room for the main content), but is revealed back if the user scrolls up.

The component works either if there's only a main navigation (default demo) or a main navigation and a sub navigation (--sub-nav demo variation). 

To create the demo, we used the Flexi Header component and the Sub Navigation component. You are free to replace them with different main/sub navigations (you can check the Header Category for more components).

For it to work properly, make sure to add the following classes to the navigation components:

  • Main Navigation: add the classes hide-nav, js-hide-nav, js-hide-nav--main;
  • Sub Navigation (if present): add the classes hide-nav, js-hide-nav, js-hide-nav--sub.

If you want your main header to be fixed (e.g., if you want the header over an image background), you can add the hide-nav--fixed class (--fixed demo variation).

In this case, the additional hide-nav--has-bg class is toggled (using JavaScript) to add/remove the main header background color.

Additionally, the hide-nav--off-canvas class is added to the main navigation when it is off-canvas. You can use it if you need to customize the main navigation style when it is outside the viewport (e.g., remove CSS shadow).

On small devices, if the Main Navigation component is a dropdown that is shown using a trigger button, then the navigation should never be hidden when the dropdown is open (user still has access to the nav close button). In this case, make sure to add, to the js-hide-nav--main element, a data-mobile-trigger attribute equal to the navigation dropdown trigger class.

For the Flexi Header component, for example, we set data-mobile-trigger='js-anim-menu-btn':

<header class="f-header js-f-header hide-nav hide-nav--fixed js-hide-nav js-hide-nav--main" data-mobile-trigger='js-anim-menu-btn'>
  <div class="f-header__mobile-content container max-width-lg">
    <a href="#0" class="f-header__logo">
      <!-- ... -->
    </a>

    <!-- this is the navigation dropdown trigger with a class of 'js-anim-menu-btn' -->
    <button class="reset anim-menu-btn js-anim-menu-btn f-header__nav-control js-tab-focus" aria-label="Toggle menu">
      <!-- ... -->
    </button>
  </div>

  <!-- ... -->
</header>

This way, when the button has an aria-expanded attribute equal to "true" (which means the dropdown navigation is open), we do not hide the main navigation on scroll.

🌅 Demo photo by Wolfgang Hasselmann on Unsplash.

Changelog

  • ✅ New option for mobile version: do not hide navigation when dropdown is visible
    🗓 September 23, 2019
  • ✅ Component created
    🗓 September 10, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us