Bootstrap Menu
Hide navbar menu on scroll down template

Free hide navbar menu on scroll down template for your projects, built with the latest Bootstrap, HTML, CSS & JavaScript. MIT Licensed - free for personal & commercial use.

edit & download Live preview
  • License
    MIT License
  • Free for commercial use?
  • Bootstrap version
  • NPM downloads
  • GitHub stars
    GitHub Repo stars

Hide navbar menu on scroll down, show on scroll up

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

Get more free tools & themes

Join the newsletter to receive more free templates - including Instagram, Facebook or Amazon clone templates, as well as multiple free tools & resources.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Privacy Policy