border-radius: 15px;
}
+.navbar-static-top {
+ position: static;
+ width: 100%;
+ margin-bottom: 0;
+}
+
+.navbar-static-top .navbar-inner {
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+}
+
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
<hr class="bs-docs-separator">
- <h2>Fixed navigation</h2>
+ <h2>Optional display variations</h2>
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
<h3>Fixed to top</h3>
</div>
</pre>
+ <h3>Static top navbar</h3>
+ <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
+ <div class="bs-docs-example bs-navbar-top-example">
+ <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
+ <div class="navbar-inner">
+ <div class="container" style="width: auto; padding: 0 20px;">
+ <a class="brand" href="#">Title</a>
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+<pre class="prettyprint linenums">
+<div class="navbar navbar-static-top">
+ ...
+</div>
+</pre>
+
<hr class="bs-docs-separator">
<hr class="bs-docs-separator">
- <h2>{{_i}}Fixed navigation{{/i}}</h2>
+ <h2>{{_i}}Optional display variations{{/i}}</h2>
<p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
<h3>Fixed to top</h3>
</div>
</pre>
+ <h3>{{_i}}Static top navbar{{/i}}</h3>
+ <p>{{_i}}Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.{{/i}}</p>
+ <div class="bs-docs-example bs-navbar-top-example">
+ <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
+ <div class="navbar-inner">
+ <div class="container" style="width: auto; padding: 0 20px;">
+ <a class="brand" href="#">{{_i}}Title{{/i}}</a>
+ <ul class="nav">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>{{! /example }}
+<pre class="prettyprint linenums">
+<div class="navbar navbar-static-top">
+ ...
+</div>
+</pre>
+
<hr class="bs-docs-separator">
-// FIXED NAVBAR
-// ------------
+// Static navbar
+// -------------------------
+
+.navbar-static-top {
+ position: static;
+ width: 100%;
+ margin-bottom: 0; // remove 18px margin for default navbar
+ .navbar-inner {
+ .border-radius(0);
+ }
+}
+
+
+
+// Fixed navbar
+// -------------------------
// Shared (top/bottom) styles
.navbar-fixed-top,
right: 0;
left: 0;
z-index: @zindexFixedNavbar;
- margin-bottom: 0; // remove 18px margin for static navbar
+ margin-bottom: 0; // remove 18px margin for default navbar
.navbar-inner {
border: 0;
}