Bootstrap navbar fixed top
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 nav fixed top by default
- Create navbar on top of page
- Add
fixed-topclass - 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