Hide Header Navigation on Scroll down and Show on Scroll Up

Image: Hide Header Navigation on Scroll down and Show on Scroll Up GIF

In this simple code snippet, we see how we can hide the navigation menu when a user scrolls down and reveal it when they try to scroll up. This is a great UX trick to make use of all the available real estate on the screen for your content. This snippet works well on desktop and mobile.

If you are having trouble with the pen, try the archived copy on GitHub

Show Hide Menu on Scroll Snippet

See the Pen Auto hiding Navbar on scroll down by Mohamed Hasan (@Mhmdhasan) on CodePen.0

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.