« Back to main

Hide navbar on scroll down

View demo Download


You can make bootstrap navbar fixed to top of page. But it will be visible always. This is also not bad. But in terms of UX when users focus on content that makes feel better. How we can do that? Hide navbar or header as the user scrolls down, and show it again when user scrolls page up. Many websites already doing this. Here is how we do it

Steps to make bootstrap 4 navbar auto hide on scroll up
  • Create navbar on top of page
  • Write javascript or jQuery funcrion to check if window scrolled
  • Add condition: if scrolled up, or scrolled down
  • Add custom class scrolled-down or scrolled-up inside "if" condition if (...) { .. } to hide navbar, or to show
  • Add fixed-top class on navbar
  • Add styling to custom classes, like transform:translateY(-100%); to hide and so on...
Here are basic code to create auto hiding navbar header

« Back to all examples

Creating e-commerce project?