@@ -640,7 +640,7 @@
{{_i}}Navbar scaffolding{{/i}}
{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}
-<div class="navbar navbar-static">
+<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
@@ -648,7 +648,7 @@
</div>
</div>
- {{_i}}To make the navbar fixed, swap the .navbar-static class for .navbar-fixed-top. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}
+ {{_i}}To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}
<div class="navbar navbar-fixed-top">
...
@@ -671,7 +671,7 @@
{{_i}}Optional responsive variation{{/i}}
{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
-<div class="navbar navbar-static">
+<div class="navbar">
<div class="navbar-inner">
<div class="container">
diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache
index 2339b2e1cf..95587456ac 100644
--- a/docs/templates/pages/upgrading.mustache
+++ b/docs/templates/pages/upgrading.mustache
@@ -114,6 +114,15 @@
{{_i}}Pills were restyled to be less rounded by default{{/i}}
{{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}
+ {{_i}}Navbar (formerly topbar){{/i}}
+
+ - {{_i}}Base class changed from
.topbar to .navbar{{/i}}
+ - {{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via
.navbar-fixed-top (previously only supported fixed){{/i}}
+ - {{_i}}Added vertical dividers to top-level nav{{/i}}
+ - {{_i}}Improved support for inline forms in the navbar, which now require
.navbar-form to properly scope styles to only the intended forms.{{/i}}
+ - {{_i}}Navbar search form now requires use of the
.navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.{{/i}}
+ - {{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.{{/i}}
+
{{_i}}Dropdown menus{{/i}}
- {{_i}}Updated the
.dropdown-menu to tighten up spacing{{/i}}
diff --git a/docs/upgrading.html b/docs/upgrading.html
index c0778d9d07..d7ad30f561 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -186,6 +186,15 @@
- Pills were restyled to be less rounded by default
- Pills now have dropdown menu support (they share the same markup and styles as tabs)
+ Navbar (formerly topbar)
+
+ - Base class changed from
.topbar to .navbar
+ - Now supports static position (default behavior, not fixed) and fixed to the top of viewport via
.navbar-fixed-top (previously only supported fixed)
+ - Added vertical dividers to top-level nav
+ - Improved support for inline forms in the navbar, which now require
.navbar-form to properly scope styles to only the intended forms.
+ - Navbar search form now requires use of the
.navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.
+ - Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.
+
Dropdown menus
- Updated the
.dropdown-menu to tighten up spacing
diff --git a/less/navbar.less b/less/navbar.less
index 404782e61a..25ca7b4e28 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -7,11 +7,15 @@
.navbar {
overflow: visible;
+ margin-bottom: @baseLineHeight;
}
-// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
+
+// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
.navbar-inner {
- background-color: @navbarBackground;
+ padding-left: 20px;
+ padding-right: 20px;
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
+ .border-radius(4px);
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
}
@@ -142,20 +146,9 @@
}
-// STATIC OR FIXED?
-// ----------------
+// FIXED NAVBAR
+// ------------
-// Static navbar
-.navbar-static {
- margin-bottom: @baseLineHeight;
-}
-.navbar-static .navbar-inner {
- padding-left: 20px;
- padding-right: 20px;
- .border-radius(4px);
-}
-
-// Fixed navbar
.navbar-fixed-top {
position: fixed;
top: 0;
@@ -163,6 +156,11 @@
left: 0;
z-index: @zindexFixedNavbar;
}
+.navbar-fixed-top .navbar-inner {
+ padding-left: 0;
+ padding-right: 0;
+ .border-radius(0);
+}
// NAVIGATION