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

1 files changed, 35 insertions, 16 deletions

diff --git a/less/navbar.less b/less/navbar.less
index 8aefd8540..7c70f83a6 100644
--- 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 {