Navbar realignment:

* Change .brand to .navbar-brand
* Change .btn-navbar to .navbar-toggle
* Redesign navbar toggle to be a bit lighter and wider
* Center align the navbar brand with a max-width of 200px (to minimize hit area) while still centering

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index b9d5f027922933eda461d697bcacf5b3ea352cf7..54cfc08bdedd961eeb182fb53ca7dabb11ba984f 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -2,12 +2,12 @@
 ================================================== -->
 <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
-    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
-    <a class="brand" href="/">Bootstrap</a>
+    <a class="navbar-brand" href="/">Bootstrap</a>
     <div class="nav-collapse collapse">
       <ul class="nav">
         <li {% if page.title == "Bootstrap" %}class="active"{% endif %}>

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index cb8482a9f6013c1bce0dd3fb2b0b6021733d4e15..cdcd0f936845f890e4ec1936721bd6db178a2a2b 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3120,6 +3120,7 @@ button.close {
 */
 
 .navbar {
+  position: relative;
   padding: 10px 15px;
   background-color: #eeeeee;
   border-radius: 4px;
@@ -3160,7 +3161,6 @@ button.close {
 }
 
 .navbar-static-top {
-  position: static;
   border-radius: 0;
 }
 
@@ -3181,40 +3181,51 @@ button.close {
   bottom: 0;
 }
 
-.navbar .brand {
-  display: inline-block;
+.navbar-brand {
+  display: block;
+  max-width: 200px;
   padding: 7px 15px;
+  margin-right: auto;
+  margin-left: auto;
   font-size: 18px;
   font-weight: 500;
   line-height: 20px;
   color: #777777;
+  text-align: center;
 }
 
-.navbar .brand:hover,
-.navbar .brand:focus {
+.navbar-brand:hover,
+.navbar-brand:focus {
   color: #5e5e5e;
   text-decoration: none;
   background-color: transparent;
 }
 
-.btn-navbar {
-  float: right;
-  padding: 10px 12px;
-  background-color: #ddd;
-  border: 0;
+.navbar-toggle {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 8px 12px;
+  background-color: transparent;
+  border: 1px solid #ddd;
   border-radius: 4px;
 }
 
-.btn-navbar .icon-bar {
+.navbar-toggle:hover,
+.navbar-toggle:focus {
+  background-color: #ddd;
+}
+
+.navbar-toggle .icon-bar {
   display: block;
-  width: 20px;
+  width: 22px;
   height: 2px;
   background-color: #fff;
   border-radius: 1px;
 }
 
-.btn-navbar .icon-bar + .icon-bar {
-  margin-top: 3px;
+.navbar-toggle .icon-bar + .icon-bar {
+  margin-top: 4px;
 }
 
 .navbar .nav > .divider {
@@ -3276,12 +3287,12 @@ button.close {
   background-color: #222222;
 }
 
-.navbar-inverse .brand {
+.navbar-inverse .navbar-brand {
   color: #999999;
 }
 
-.navbar-inverse .brand:hover,
-.navbar-inverse .brand:focus {
+.navbar-inverse .navbar-brand:hover,
+.navbar-inverse .navbar-brand:focus {
   color: #ffffff;
   background-color: transparent;
 }
@@ -3307,8 +3318,13 @@ button.close {
   background-color: #080808;
 }
 
-.navbar-inverse .btn-navbar {
-  background-color: #444;
+.navbar-inverse .navbar-toggle {
+  border-color: #333;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  background-color: #333;
 }
 
 .navbar-inverse .nav > .divider {
@@ -3345,7 +3361,7 @@ button.close {
     padding-top: 0;
     padding-bottom: 0;
   }
-  .navbar .brand {
+  .navbar-brand {
     float: left;
     padding-top: 15px;
     padding-bottom: 15px;
@@ -3379,7 +3395,10 @@ button.close {
   .navbar-inverse .nav > .divider {
     border-right-color: #2f2f2f;
   }
-  .navbar .btn-navbar {
+  .navbar-toggle {
+    position: relative;
+    top: auto;
+    left: auto;
     display: none;
   }
   .nav-collapse.collapse {

diff --git a/docs/components.html b/docs/components.html
index f1b45159b749c4d229fc3b224ca4a0eb021fca7b..63c37131ec1511d9c80db64b06cf56705467f2cc 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -766,7 +766,7 @@ title: Components
           <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
           <div class="bs-docs-example">
             <div class="navbar">
-              <a class="brand" href="#">Title</a>
+              <a class="navbar-brand" href="#">Title</a>
               <ul class="nav">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Link</a></li>
@@ -776,7 +776,7 @@ title: Components
           </div><!-- /example -->
 {% highlight html linenos %}
 <div class="navbar">
-  <a class="brand" href="#">Title</a>
+  <a class="navbar-brand" href="#">Title</a>
   <ul class="nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
@@ -791,11 +791,11 @@ title: Components
           <p>A simple link to show your brand or project name only requires an anchor tag.</p>
           <div class="bs-docs-example">
             <div class="navbar">
-              <a class="brand" href="#">Title</a>
+              <a class="navbar-brand" href="#">Title</a>
             </div>
           </div><!-- /example -->
 {% highlight html linenos %}
-<a class="brand" href="#">Title</a>
+<a class="navbar-brand" href="#">Title</a>
 {% endhighlight %}
 
           <h3>Nav links</h3>
@@ -874,7 +874,7 @@ title: Components
           <div class="bs-docs-example bs-navbar-top-example">
             <div class="navbar navbar-fixed-top" style="position: absolute;">
               <div class="container" style="width: auto;">
-                <a class="brand" href="#">Title</a>
+                <a class="navbar-brand" href="#">Title</a>
                 <ul class="nav">
                   <li class="active"><a href="#">Home</a></li>
                   <li><a href="#">Link</a></li>
@@ -894,7 +894,7 @@ title: Components
           <div class="bs-docs-example bs-navbar-bottom-example">
             <div class="navbar navbar-fixed-bottom" style="position: absolute;">
               <div class="container" style="width: auto;">
-                <a class="brand" href="#">Title</a>
+                <a class="navbar-brand" href="#">Title</a>
                 <ul class="nav">
                   <li class="active"><a href="#">Home</a></li>
                   <li><a href="#">Link</a></li>
@@ -914,7 +914,7 @@ title: Components
           <div class="bs-docs-example bs-navbar-top-example">
             <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
               <div class="container" style="width: auto;">
-                <a class="brand" href="#">Title</a>
+                <a class="navbar-brand" href="#">Title</a>
                 <ul class="nav">
                   <li class="active"><a href="#">Home</a></li>
                   <li><a href="#">Link</a></li>
@@ -931,16 +931,16 @@ title: Components
 
 
           <h2>Responsive navbar</h2>
-          <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
+          <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p>
           <div class="bs-docs-example">
             <div class="navbar">
               <div class="container">
-                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+                <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                 </a>
-                <a class="brand" href="#">Title</a>
+                <a class="navbar-brand" href="#">Title</a>
                 <div class="nav-collapse collapse navbar-responsive-collapse">
                   <ul class="nav">
                     <li class="active"><a href="#">Home</a></li>
@@ -984,15 +984,15 @@ title: Components
 <div class="navbar">
   <div class="container">
 
-    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
-    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+    <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
+    <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </a>
 
     <!-- Be sure to leave the brand out there if you want it shown -->
-    <a class="brand" href="#">Title</a>
+    <a class="navbar-brand" href="#">Title</a>
 
     <!-- Place everything within .navbar-collapse to hide it until above 768px -->
     <div class="nav-collapse collapse navbar-responsive-collapse">
@@ -1012,12 +1012,12 @@ title: Components
           <div class="bs-docs-example">
             <div class="navbar navbar-inverse" style="position: static;">
               <div class="container">
-                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
+                <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                 </a>
-                <a class="brand" href="#">Title</a>
+                <a class="navbar-brand" href="#">Title</a>
                 <div class="nav-collapse collapse navbar-inverse-collapse">
                   <ul class="nav">
                     <li class="active"><a href="#">Home</a></li>

diff --git a/less/navbar.less b/less/navbar.less
index 8aefd8540767574d635717d2cd06ef834b6a03f6..7c70f83a6ca568ea0c0605e73801b6b2391cc0c2 100644 (file)
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -4,6 +4,7 @@
 
 // Wrapper and base class
 .navbar {
+  position: relative;
   padding: 10px 15px;
   background-color: @navbar-bg;
   border-radius: @border-radius-base;
@@ -16,7 +17,8 @@
 
 .navbar {
   .nav {
-    margin-top: 15px; // space out from .navbar .brand and .btn-navbar
+    // space out from .navbar .brand and .btn-navbar
+    margin-top: 15px;
   }
   .nav > li > a {
     padding-top: (@navbar-height - @line-height-base) / 2;
@@ -45,7 +47,6 @@
 
 // Static navbar
 .navbar-static-top {
-  position: static;
   border-radius: 0;
 }
 
@@ -68,13 +69,17 @@
 // --------------------------------------------------
 
 // Brand/project name
-.navbar .brand {
-  display: inline-block;
+.navbar-brand {
+  display: block;
+  max-width: 200px;
+  margin-left: auto;
+  margin-right: auto;
   padding: 7px 15px;
   font-size: 18px;
   font-weight: 500;
   line-height: @line-height-base;
   color: @navbar-brand-color;
+  text-align: center;
   &:hover,
   &:focus {
     color: @navbar-brand-color-hover;
@@ -84,23 +89,30 @@
 }
 
 // Collapsible navbar toggle
-.btn-navbar {
-  float: right;
-  padding: 10px 12px;
-  background-color: #ddd;
-  border: 0;
+.navbar-toggle {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 8px 12px;
+  background-color: transparent;
+  border: 1px solid #ddd;
   border-radius: 4px;
 
+  &:hover,
+  &:focus {
+    background-color: #ddd;
+  }
+
   // Bars
   .icon-bar {
     display: block;
-    width: 20px;
+    width: 22px;
     height: 2px;
     background-color: #fff;
     border-radius: 1px;
   }
   .icon-bar + .icon-bar {
-    margin-top: 3px;
+    margin-top: 4px;
   }
 }
 
@@ -171,7 +183,7 @@
 .navbar-inverse {
   background-color: @navbar-inverse-bg;
 
-  .brand {
+  .navbar-brand {
     color: @navbar-inverse-brand-color;
     &:hover,
     &:focus {
@@ -200,8 +212,12 @@
   }
 
   // Darken the responsive nav toggle
-  .btn-navbar {
-    background-color: #444;
+  .navbar-toggle {
+    border-color: #333;
+    &:hover,
+    &:focus {
+      background-color: #333;
+    }
   }
 
   // Darken dividers
@@ -243,7 +259,7 @@
     padding-top: 0;
     padding-bottom: 0;
   }
-  .navbar .brand {
+  .navbar-brand {
     float: left;
     padding-top: (@navbar-height - @line-height-base) / 2;
     padding-bottom: (@navbar-height - @line-height-base) / 2;
@@ -277,7 +293,10 @@
   }
 
   // Required to make the collapsing navbar work on regular desktops
-  .navbar .btn-navbar {
+  .navbar-toggle {
+    position: relative;
+    top: auto;
+    left: auto;
     display: none;
   }
   .nav-collapse.collapse {