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).

🌅 Demo photo by Wolfgang Hasselmann on Unsplash.

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