🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

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 based on CodyFrame.

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 their HTML.

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.

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 follow these steps:

  1. Add the classes hide-nav, js-hide-nav, js-hide-nav--main to the main header;
  2. If your main header has a position value (e.g., position: relative;) in CSS, remove it, or it may conflict with the position: sticky of the hiding navigation;
  3. If a sub navigation is present, add to it the classes hide-nav, js-hide-nav, js-hide-nav--sub.
  4. To prevent the hiding effect if a specific class of the main header is triggered (e.g., header--expanded), you can use data-nav-target-class attribute and pass a list of space separated classes;
<!-- main header only 👇 -->
<header class="header hide-nav js-hide-nav js-hide-nav--main" data-nav-target-class="header--expanded">
  <!-- ... -->
</header>

<!-- main header + sub navigation 👇 -->
<header class="header hide-nav js-hide-nav js-hide-nav--main" data-nav-target-class="header--expanded">
  <!-- ... -->
</header>

<nav class="sub-nav z-index-2 hide-nav js-hide-nav js-hide-nav--sub">
  <!-- ... -->
</navv>

--fixed variation #

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

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

<header class="header hide-nav hide-nav--fixed js-hide-nav js-hide-nav--main" data-nav-target-class="header--expanded">
  <!-- ... -->
</header>

<section>
  <!-- ... -->
</section>

<nav class="sub-nav z-index-2 hide-nav js-hide-nav js-hide-nav--sub">
  <!-- ... -->
</navv>

--off-canvas #

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.

Categories

✅ Project duplicated

✅ Project created

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