Bootstrap Cookbook: Difference between revisions
Jump to navigation
Jump to search
(Created page with "Category:CSS Category:Web Development == Headers == <syntaxhighlight lang="html4strict"> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="c...") |
No edit summary |
||
| Line 1: | Line 1: | ||
[[Category:CSS]] [[Category:Web Development]] | [[Category:CSS]] [[Category:Web Development]] | ||
== Headers == | == Headers == | ||
| Line 24: | Line 23: | ||
</body> | </body> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== Fixed navbar overlapping page content === | |||
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 [http://getbootstrap.com/components/#navbar-fixed-top Bootstrap docs].<ref>[http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site Twitter Bootstrap Fixed Top Navbar Overlapping Site], Stackoverflow</ref> | |||
Body padding is required in a stylesheet that follows the Bootstrap stylesheets: | |||
<syntaxhighlight lang="css"> | |||
body { padding:70px; } | |||
</syntaxhighlight> | |||
And to make it responsive: | |||
<syntaxhighlight lang="css"> | |||
body { padding-top: 52px; } | |||
@media screen and (max-width: 768px) { | |||
body { padding-top: 0px; } | |||
} | |||
</syntaxhighlight> | |||
== Notes == | |||
<references /> | |||
Revision as of 14:49, 28 January 2015
Headers
<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"> <h1>Page Title</h1> <!--// etc... //--> </body>
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
- ↑ Twitter Bootstrap Fixed Top Navbar Overlapping Site, Stackoverflow