A Navigation that hides automatically when the user scrolls down, and is revealed when the user scrolls back up.
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.
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
- Sub Navigation (if present): add the classes
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--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
<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">
<!-- ... -->
<!-- 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">
<!-- ... -->
<!-- ... -->
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.
Bug Report & Feedback
Get in touch: suggest a component or report a bug.