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

Make bootstrap navbar fixed on scroll (sticky top)

View demo View demo sticky 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.

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
  • Check window screen size with javascript: if ($(window).width() > 992) { ... }
  • Now let's check if window scrolled $(window).scroll(function(){ ... }
  • Check if scrolled more than x amount of px if ($(this).scrollTop() > 40) { ... }
  • Add fixed-top class on navbar
  • When you make navbar's position fixed or absolute during scroll, other elements will shake. because they will take space of navbar
Here are basic code snippets

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 e-commerce project?