SHARE

Error : Bootstrap Top Navbar header Overlap Body Content of page

When you create a fixed navbar header with bootstrap css there is a problem with it . Navbar fixed header overlap the body content on the top . To solve this problem ,you have to need some CSS changes for display it correctly .

Solution 1 Set top padding to 60 px of body{ }

Bootstrap Navbar Header Overlap Body Content
Bootstrap Navbar Header Overlap Body Content

First and the best solution is change the padding of the whole body of page . To do this use inline style and insert the style attribute with top padding 60 px as shown in following example .

<body style="padding-top : 60px ;" >

or method 2

In this method used padding-top 60 px for your body selector . For example

@media all{
body{ padding-top : 60px ;}
}

Will this CSS code all padding-top is set 60 px for devices . In some type of navbars you need to change padding size for small devices . So you can change it with media query for mobile size and padding-top set to !important .

Solution 2 Set top padding to 60 px of top row or container

In this method you don’t have to need to change whole body tag padding-top . Try to set the padding-top to 60 px for top container or top row . In bootstrap all of other container and row are adjust accordingly .