Bootstrap Menu
Navbar fixed on scroll template

Make bootstrap navbar fixed on scroll (sticky top)

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.