Hiding Navigation

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

Dependencies

• Animated Menu Button
• Flexi Header
• Sub Navigation

How to

The Hiding Navigation component is a navigation container 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

• Navigation > Header

Bug report & feedback

Component Github page ↗