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

Bootstrap navbar fixed top

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

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. = 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?