Commit 077577c7 authored by Mark Otto's avatar Mark Otto

fixes #4421: add static top navbar class

parent b86e1fb6
...@@ -4138,6 +4138,18 @@ input[type="submit"].btn.btn-mini { ...@@ -4138,6 +4138,18 @@ input[type="submit"].btn.btn-mini {
border-radius: 15px; 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-top,
.navbar-fixed-bottom { .navbar-fixed-bottom {
position: fixed; position: fixed;
......
...@@ -1162,7 +1162,7 @@ ...@@ -1162,7 +1162,7 @@
<hr class="bs-docs-separator"> <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> <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> <h3>Fixed to top</h3>
...@@ -1209,6 +1209,28 @@ ...@@ -1209,6 +1209,28 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </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">
&lt;div class="navbar navbar-static-top"&gt;
...
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
......
...@@ -1091,7 +1091,7 @@ ...@@ -1091,7 +1091,7 @@
<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> <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> <h3>Fixed to top</h3>
...@@ -1138,6 +1138,28 @@ ...@@ -1138,6 +1138,28 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </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">
&lt;div class="navbar navbar-static-top"&gt;
...
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
......
...@@ -140,8 +140,22 @@ ...@@ -140,8 +140,22 @@
// 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 // Shared (top/bottom) styles
.navbar-fixed-top, .navbar-fixed-top,
...@@ -150,7 +164,7 @@ ...@@ -150,7 +164,7 @@
right: 0; right: 0;
left: 0; left: 0;
z-index: @zindexFixedNavbar; z-index: @zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for static navbar margin-bottom: 0; // remove 18px margin for default navbar
.navbar-inner { .navbar-inner {
border: 0; border: 0;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment