« Back to main

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 nav fixed top by default
  • Create navbar on top of page
  • Add fixed-top class
  • Add some padding top on parent element, for ex body or header.
    $('body').css('padding-top', $('.navbar').outerHeight() + 'px');
    You can add padding-top with only CSS also.
  • Note: The size of padding-top should be equal to height of navbar
Here are basic code snippets

« Back to all examples

Creating e-commerce project?