Bootstrap Cookbook
Jump to navigation
Jump to search
Bootstrap reference[edit]
Headers[edit]
<body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand">Project Name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active">lorem ipsum dolor</li> <li class="active">lorem ipsum dolor</li> <!--// etc... //--> </ul> </div> </div> </nav> <div class="container" role="main"> <div class="page-header"> <h1>Page Title</h1> <p>Teaser...</p> </div> <!--// page content... //--> </div> </body>
[edit]
If you simply copy the sample HTML from the Bootstrap site (see [#Headers] above), the fixed navbar will overlap the site content. This is addressed in the Bootstrap docs.[1]
Body padding is required in a stylesheet that follows the Bootstrap stylesheets:
body { padding:70px; }
And to make it responsive:
body { padding-top: 52px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
Notes[edit]
- ↑ Twitter Bootstrap Fixed Top Navbar Overlapping Site, Stackoverflow