diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index c451d13a..44fdb437 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e9fb04f2..b90cb763 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2840,20 +2840,26 @@ button.btn.btn-small, input[type="submit"].btn.btn-small { box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); outline: 0; } -.navbar-fixed-top { +.navbar-fixed-top, .navbar-fixed-bottom { position: fixed; - top: 0; right: 0; left: 0; z-index: 1030; + margin-bottom: 0; } -.navbar-fixed-top .navbar-inner { +.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { padding-left: 0; padding-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } +.navbar-fixed-top { + top: 0; +} +.navbar-fixed-bottom { + bottom: 0; +} .navbar .nav { position: relative; left: 0; diff --git a/docs/components.html b/docs/components.html index 172fbcf2..9cfd261f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -849,13 +849,24 @@ </div>
To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar.
Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.
<div class="navbar navbar-fixed-top"> ... </div>-
In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
+<div class="navbar navbar-fixed-bottom"> + ... +</div> ++
When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
A simple link to show your brand or project name only requires an anchor tag.
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 3a176fa4..8868d992 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -773,13 +773,24 @@ </div>
{{_i}}To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar.{{/i}}
{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.{{/i}}
<div class="navbar navbar-fixed-top"> ... </div>-
{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}
+<div class="navbar navbar-fixed-bottom"> + ... +</div> ++
{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}
{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}
diff --git a/less/navbar.less b/less/navbar.less
index 87f26069..b9e63487 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -153,22 +153,37 @@
}
+
// FIXED NAVBAR
// ------------
-.navbar-fixed-top {
+// Shared (top/bottom) styles
+.navbar-fixed-top,
+.navbar-fixed-bottom {
position: fixed;
- top: 0;
right: 0;
left: 0;
z-index: @zindexFixedNavbar;
+ margin-bottom: 0; // remove 18px margin for static navbar
}
-.navbar-fixed-top .navbar-inner {
+.navbar-fixed-top .navbar-inner,
+.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
.border-radius(0);
}
+// Fixed to top
+.navbar-fixed-top {
+ top: 0;
+}
+
+// Fixed to bottom
+.navbar-fixed-bottom {
+ bottom: 0;
+}
+
+
// NAVIGATION
// ----------