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