Home Education Solution-Bootstrap Navbar Header Overlap Body Content

Solution-Bootstrap Navbar Header Overlap Body Content

0
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 .This problem is due to css padding property issue .So by changing the padding in css you can solve the issue . There are two methods to change the padding .

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 .

READ ALSO : -  How To Set Thick Paper Setting Epson Printer

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 .