Back to main
Bootstrap  fixed top onscroll image illustration

Bootstrap navbar fixed top

View demo Download


In this example we will show fixed navbar menu. When you make navbar's position fixed or absolute, then all elements which comes after navbar goes behind the navbar. In other word, navbar will overlap other element. That's why we need to add some padding top to parent element or just add some padding-top to body

Steps to make bootstrap navbar fixed top with CSS
  • Create navbar on top of page
  • Add fixed-top class
  • Add some padding top on parent element, for ex body or header.
    document.body.style.paddingTop = navbar_height + 'px';
    You can also add padding-top with CSS as well.
  • Note: The size of padding-top should be equal to height of navbar
Here are basic code snippets

Back to all examples

Creating an e-commerce project?