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).
🌅 Demo photo by Wolfgang Hasselmann on Unsplash.
Bug Report & Feedback
Get in touch: suggest a component or report a bug.