Auto-hiding Navigation
July 13, 2016 | 41 Feedbacks

Auto-Hiding Navigation

A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Auto-hiding navigations have been around for quite some time now, in particular on mobile devices. The idea behind this UX pattern is simple yet efficient: we want the navigation to be easy to reach all the time, so we stick it on top. However, we auto-hide it when the user scrolls down, to create more room for the content. If the user scrolls up, we interpret his behaviour as a will to access the navigation, so we bring it back.

Since we’ve been using this approach in several clients’ projects, we thought it would be handy to have a ready-to-use snippet here on CodyHouse.

Images: Unsplash

Creating the structure

The HTML structure is composed of a element used to wrap the primary navigation ( and a for the page main content.

If the page has a sub-navigation, an additional is inserted inside the header element:

Finally, if the secondary navigation is below a hero block, a .cd-hero element is inserted right below the <header>, followed by the .cd-secondary-nav element:

Adding style

We used the .cd-auto-hide-header class to define the main style of the auto-hiding header. By default, the header has a fixed position and a top of zero; when the user starts scrolling down, the .is-hidden class is used to hide the header right above the viewport.

In the style.css file (or style.scss if you are using Sass) the code you find right below the comment ‘1. Auto-Hiding Navigation – Simple’ is the one you need to include in your project if you are using the ‘Simple’ auto-hiding navigation (primary navigation only).

If your header has a sub-navigation (right below the primary navigation), then you need to include also the style you find under the ‘2. Auto-Hiding Navigation – with Sub Nav’ comment. This second block of code is used to define the main style for the secondary navigation (using the .cd-secondary-nav class).

Finally, if your secondary navigation is below a hero section, in addition to the previous two blocks you need to include also the code under the ‘3. Auto-Hiding Navigation – with Sub Nav + Hero Image’ section. This is used to define two classes, .fixed and .slide-up, which are added to the secondary navigation while scrolling (the first one to make it ‘sticky’ and the second to slide it up when the primary navigation is hidden).

Finally, the ‘Main content’  and ‘Intro Section’ blocks are used to define the basic style for the .cd-main-content and .cd-hero elements (mostly padding/margin to account for the fixed header).

Events handling

We use jQuery to listen for the scroll event on the window object.

The autoHideHeader() function takes care of hiding/revealing the navigation according to whether the user is scrolling up or down.


July 13, 2016
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • MG Kibria

    How can i use it in wordpress?

    • yratof

      Exactly like this, no need to worry about wordpress

  • Arkaprava Majumder

    in the demo nav + sub nav + hero, in mobile view (iphone 6), sub nav is not responsive, hero image is not full screen unlike desktop version, by the way, its an awesome & very useful inspiration.

    • Sebastiano Guerriero

      hey there! the subnav is scrollable on mobile, that is the expected responsive behaviour (if you’re checking it resizing the browser on a laptop, you may see a nasty scrollbar, but that won’t be visible on a smartphone)

  • Tofanelli

    Hey Claudia, amazing article as usual!!! congrats!

    quick question…. in the “nav + sub nav + hero” example, if you scroll it to the end and then scroll up, the nave appears and disappears… have you seen this?

    Cheers =)

    • Sebastiano Guerriero

      Hi there! that is the expected behaviour. Basically we hide the navigation when you scroll down, and we bring it back if you scroll in the opposite direction

      • Tofanelli

        Hi there! =)
        But it shows and hides while i’m scrolling up…. is it normal? because, if i’m scrolling up should show all the time… no?

        • Claudia Romano

          Hi there, yes it should always be visible while scrolling up. Unfortunately I’m not able to replicate the bug. Could you provide more info (like browser, version…). Thanks!

          • Tofanelli

            yup… sure… windows 8.1 ((in that day, now it’s windows 10)) and Chrome in its latest version always…. I replicate it in Firefox and Blisk…. same behavior… would like I record a video to show it better?

  • Vinix Meshak Sylvesten

    Superb…really useful…thanks

  • Laurentiu LAZAR

    stunning. I wait months for this. thank you

  • Surjith SM

    Wouldn’t be cool if the navigation shown when we mouse over the Top Area? Especially in the simple nav version? I was looking something like that.

    • Tofanelli

      something like this one? –

      • Surjith SM

        Almost. When we hover the top area, The menu should slide down.

        • Tofanelli

          well, you can apply the same concept to the div and that’s it =)

    • zaba

      Bad idea. What if there are links you wish to click on in the top area and the navigation appears. Don’t do it.

  • sivilll

    Great theme. Is it available in Atom editor?

  • arbusto

    Cool tutorial! How can I achieve the same effect but having also a sticky footer and hiding down when scrolling so that when someone scrolls down the header and the footer hide and when scroll up they both appear (like in Medium posts)?


  • Guy

    Would be nice to have it without jQuery.

  • Marjonh Davin

    as usual ! you guys nailed it again ! =) this is so perfect . =) thank you so much guys =)

    • Claudia Romano

      well done! ;)

      • Marjonh Davin

        thanks claudia :) but i did not notice this one problem . and i don’t know why or how this happened :( notice my screenshot .
        my drop down menu are sliced the background-color in that particular area only when i scroll it down . :( i tried set a z-index in the drop down menu but no luck :( please could you help me out of this :( thank you so much.

        • yratof

          Ensure you’ve got a background colour on the sub menu

          • ravinthranath

            Use z-index:9999; in css

          • yratof

            Please don’t, you do 9999, then I do 10000, then its an endless stack of things that want to be on top

  • Sony AK

    Hi Claudia, is there any sample about how to add icon on the menu? I want to add icon in front of the menu text.

  • godling

    Hi, thanks for share this script. I am trying to use it on a sub navi with anchor links and found that if the page is scrolled up by an anchor, the main nav also shows, which is non-sense to me.

  • Sony AK

    Hi, how to make li menu vertically scrollable if we have many items in the menu?

  • George Mwaniki

    Hi Claudia, nice tuts bt i have a small problem on mine when i scroll down the secondary menu goes past the main header and then returns to its position, what could be the issue. thanks

  • Jay

    How can I disable showing top nav when scrolling up? I want the top nav to only show when it hits the top of the website? Thanks.

    • Jay

      Help please. :-)

      • Marjonh Davin

        Hello did you find the solution of that ? cuz i also want that idea too

  • mciszczon

    I think there might be a bug in here. If you scroll the page really slow (easily done using the bar on the right side of the screen), menu never hides. It’s not that big deal, but still.

    • mciszczon

      Funny, I cannot replicate it now. Maybe it was something on my side, that I created and fixed all by accident.

  • Emily Jane

    Is there a bug in this? If I click a link there is no js working. The end of the url just say “#0″ at the end, but it doesnt do anything?

    • Paweł P.

      It’s only example. Links doesn’t work.

  • Allan Stromfeldt Christensen

    I combined your Auto-Hiding Navigation script with your Mega Dropdown script on the mobile-adapted part of my site. Thanks!

  • Pierre Dickinson

    Hi, thanks for all your ressources, impressive work!
    I have combined Fullscreen Pushing Navigation + MegaSite Navigation + Auto-Hiding Navigation with ion icons and it works great! see the demo :
    But i had a scroll problem with the ‘.sub-nav-hero’ class and the ‘.secondary-nav-fixed” class
    I could not scroll to the end of the page, so i just had this to the .scss :

    &.sub-nav-hero {
    &.secondary-nav-fixed {
    height: 100%;
    margin-top: $secondary-nav-height-small;

    Now its working great!
    (i’m on Mac Safari 9.1)

    I’m going to use this canvas in WordPress with the awesome starter theme “Sage”, check it out!

  • I Am Aurélien

    Hi ! Does anyone knows how to close the menu (mobile) after clicking on one of the menu item ? What i want :

    1 – I click on “MENU”
    2 – Menu is open
    3 – I click on the menu item “Contact” (for instance)
    4 – The menu automatically close

    Thanks a lot ;)

  • Marjonh Davin

    Hello @claudiarrromano:disqus i’ts been a months since i’m using this effect in my sites. but i’m wondering if it is possible to set a time before the first nav showed when scrolled up ? if it is , may you give a code for that ? :) thank you so much .

    • Marjonh Davin

      disregard my first question . for now i want the same question of @Jay Down there . please anyone have an idea not to display the primary-nav when scrolled up ? but showed in the top of the site . ? please . :(