Back to main Free Hosting Bootstrap Builder Free UI Kit
Bootstrap  fixed top onscroll image illustration

Hide navbar menu on scroll down, show on scroll up

View demo Download

Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.

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 5 navbar auto hide on scroll up
  • Create navbar on top of page
  • Write javascript 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 an e-commerce project?