Bootstrap Menu
Navbar fixed on scroll template

Free navbar fixed on scroll 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

Make bootstrap navbar fixed on scroll (sticky top)

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.

There are multiple ways to fix navbar or header on top of page to stay always visible. In this example we illustrate how to add fixed-top class when page scolled. To see the difference between normal and fixed top navigation menu, just scroll. Keep in mind, This will work only for desktop screens. But still you can customize our code example.

Steps to make bootstrap nav fixed top after scroll
  • Create navbar on top of page
  • Now check if window scrolled window.addEventListener('scroll', function() { ... }
  • Check if scrolled more than x amount of px if (window.scrollY > 50) { ... }
  • Select navbar element and add function classList.add('fixed-top'); to fix on top
  • Remove class fixed-top when page scrolled back to top
Here are basic code snippets

Another simple solution with CSS:

There is more simple way also to do that, just add class name sticky-top to your navbar. But keep in mind, your navbar element must be direct child of body. If you wrap your navbar with some other div it will not work.

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