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

Make bootstrap navbar fixed on scroll (sticky top)

View demo (normal) View demo (delay) Download all

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

Creating an e-commerce project?