CODEWITHSUNDEEP
twitter-bootstrapnavbar
K-Laboratory
K-Laboratory

Reputation: 119

Bootstrap navbar fixed top: losing the top of Jumbotron section

I'm playing around with sample page Bootstrap navbar fixed top at this address: http://getbootstrap.com/examples/navbar-fixed-top/

In my case, I extended the length of default menu (ie. add more menu item or longer item wording). And when the screen size is between 768-990px the Navbar splits into 2 lines (the left part on top and the right part on bottom).

When this situation is happening, the top part of the Joombotron section is overlay and missing behind the navbar (click to see in figure below).

What correction can be made to make sure the Jumbotron is always below the navbar section ?

Thank you, K

top of jumbotron is missing

Upvotes: 2

Views: 541

Answers (1)

J_Everhart383
J_Everhart383

Reputation: 354

In the default template for navbar fixed top, the body element is given padding of 70px to push it below the navbar. If you increased the size of the fixed navbar, you will also need to add additional padding to the body between those two breakpoints:

@media only screen and (min-width:768px) and (max-width: 990px)  {
 body {
  padding: /*new padding rule here*/
  }
 }

You can use the chrome dev tools to get the height for the expanded nav bar.

Upvotes: 1

Related Questions