Overhaul navbar navs

* Switch from  to  to eliminate an element in selectors
* Drop .navbar-divider entirely

4 files changed, 126 insertions, 204 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index be8236ea3..b4a3b5854 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3515,33 +3515,33 @@ button.close {
   clear: both;
 }
 
-.navbar .nav {
+.navbar-nav {
   margin-top: 15px;
 }
 
-.navbar .nav > li > a {
+.navbar-nav > li > a {
   padding-top: 15px;
   padding-bottom: 15px;
   line-height: 20px;
   color: #777777;
 }
 
-.navbar .nav > li > a:hover,
-.navbar .nav > li > a:focus {
+.navbar-nav > li > a:hover,
+.navbar-nav > li > a:focus {
   color: #333333;
   background-color: transparent;
 }
 
-.navbar .nav > .active > a,
-.navbar .nav > .active > a:hover,
-.navbar .nav > .active > a:focus {
+.navbar-nav > .active > a,
+.navbar-nav > .active > a:hover,
+.navbar-nav > .active > a:focus {
   color: #555555;
   background-color: #d5d5d5;
 }
 
-.navbar .nav > .disabled > a,
-.navbar .nav > .disabled > a:hover,
-.navbar .nav > .disabled > a:focus {
+.navbar-nav > .disabled > a,
+.navbar-nav > .disabled > a:hover,
+.navbar-nav > .disabled > a:focus {
   color: #cccccc;
   background-color: transparent;
 }
@@ -3570,7 +3570,7 @@ button.close {
 .navbar-brand {
   display: block;
   max-width: 200px;
-  padding: 7px 15px;
+  padding: 15px;
   margin-right: auto;
   margin-left: auto;
   font-size: 18px;
@@ -3614,57 +3614,49 @@ button.close {
   margin-top: 4px;
 }
 
-.navbar .nav > .divider {
-  height: 2px;
-  margin: 9px 0;
-  overflow: hidden;
-  background-color: #e1e1e1;
-  border-bottom: 1px solid #fbfbfb;
-}
-
 .navbar-form {
   margin-top: 8px;
   margin-bottom: 8px;
 }
 
-.navbar .nav > li > .dropdown-menu {
+.navbar-nav > li > .dropdown-menu {
   margin-top: 0;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
 
-.navbar-fixed-bottom .nav > li > .dropdown-menu {
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.navbar .nav li.dropdown > a:hover .caret,
-.navbar .nav li.dropdown > a:focus .caret {
+.navbar-nav li.dropdown > a:hover .caret,
+.navbar-nav li.dropdown > a:focus .caret {
   border-top-color: #333333;
   border-bottom-color: #333333;
 }
 
-.navbar .nav li.dropdown.open > .dropdown-toggle,
-.navbar .nav li.dropdown.active > .dropdown-toggle,
-.navbar .nav li.dropdown.open.active > .dropdown-toggle {
+.navbar-nav li.dropdown.open > .dropdown-toggle,
+.navbar-nav li.dropdown.active > .dropdown-toggle,
+.navbar-nav li.dropdown.open.active > .dropdown-toggle {
   color: #555555;
   background-color: #d5d5d5;
 }
 
-.navbar .nav li.dropdown > .dropdown-toggle .caret {
+.navbar-nav li.dropdown > .dropdown-toggle .caret {
   border-top-color: #777777;
   border-bottom-color: #777777;
 }
 
-.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
-.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
-.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
+.navbar-nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar-nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
   border-top-color: #555555;
   border-bottom-color: #555555;
 }
 
-.navbar .pull-right > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
+.navbar-nav.pull-right > li > .dropdown-menu,
+.navbar-nav > li > .dropdown-menu.pull-right {
   right: 0;
   left: auto;
 }
@@ -3687,26 +3679,26 @@ button.close {
   color: #999999;
 }
 
-.navbar-inverse .nav > li > a {
+.navbar-inverse .navbar-nav > li > a {
   color: #999999;
 }
 
-.navbar-inverse .nav > li > a:hover,
-.navbar-inverse .nav > li > a:focus {
+.navbar-inverse .navbar-nav > li > a:hover,
+.navbar-inverse .navbar-nav > li > a:focus {
   color: #ffffff;
   background-color: transparent;
 }
 
-.navbar-inverse .nav > .active > a,
-.navbar-inverse .nav > .active > a:hover,
-.navbar-inverse .nav > .active > a:focus {
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
   color: #ffffff;
   background-color: #080808;
 }
 
-.navbar-inverse .nav > .disabled > a,
-.navbar-inverse .nav > .disabled > a:hover,
-.navbar-inverse .nav > .disabled > a:focus {
+.navbar-inverse .navbar-nav > .disabled > a,
+.navbar-inverse .navbar-nav > .disabled > a:hover,
+.navbar-inverse .navbar-nav > .disabled > a:focus {
   color: #444444;
   background-color: transparent;
 }
@@ -3724,31 +3716,26 @@ button.close {
   background-color: #fff;
 }
 
-.navbar-inverse .nav > .divider {
-  background-color: #151515;
-  border-bottom-color: #2f2f2f;
-}
-
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
-.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
-.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
+.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle,
+.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle,
+.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle {
   color: #ffffff;
   background-color: #080808;
 }
 
-.navbar-inverse .nav li.dropdown > a:hover .caret {
+.navbar-inverse .navbar-nav li.dropdown > a:hover .caret {
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
 }
 
-.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
+.navbar-inverse .navbar-nav li.dropdown > .dropdown-toggle .caret {
   border-top-color: #999999;
   border-bottom-color: #999999;
 }
 
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
-.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
-.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
+.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
   border-top-color: #ffffff;
   border-bottom-color: #ffffff;
 }
@@ -3760,36 +3747,19 @@ button.close {
   }
   .navbar-brand {
     float: left;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    margin-left: -10px;
+    margin-right: 5px;
+    margin-left: -5px;
   }
   .navbar .nav {
     float: left;
     margin-top: 0;
   }
-  .navbar .nav:before,
-  .navbar .nav:after {
-    display: table;
-    content: " ";
-  }
-  .navbar .nav:after {
-    clear: both;
-  }
-  .navbar .nav:before,
-  .navbar .nav:after {
-    display: table;
-    content: " ";
-  }
-  .navbar .nav:after {
-    clear: both;
+  .navbar .nav > li {
+    float: left;
   }
   .navbar .nav.pull-right {
     float: right;
   }
-  .navbar .nav > li {
-    float: left;
-  }
   .navbar .nav > .divider {
     width: 1px;
     height: 30px;
@@ -3800,15 +3770,6 @@ button.close {
   .navbar-inverse .nav > .divider {
     border-right-color: #2f2f2f;
   }
-  .navbar-fixed-left {
-    padding-right: 0;
-    padding-left: 0;
-  }
-  .navbar-fixed-left .navbar-brand,
-  .navbar-fixed-left .nav,
-  .navbar-fixed-left .nav > li {
-    float: none;
-  }
   .navbar-toggle {
     position: relative;
     top: auto;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 3f3a253c8..0e9292495 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -308,7 +308,7 @@ section > ul li {
 .bs-navbar-bottom-example {
   z-index: 1;
   padding: 0;
-  height: 90px;
+  height: 110px;
   overflow: hidden; /* cut the drop shadows off */
 }
 .bs-navbar-top-example .navbar-fixed-top,
diff --git a/docs/docs.html b/docs/docs.html
index e62e44661..48e2aae0b 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3423,7 +3423,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-docs-example">
       <div class="navbar">
         <a class="navbar-brand" href="#">Title</a>
-        <ul class="nav">
+        <ul class="nav navbar-nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
@@ -3433,7 +3433,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html linenos %}
 <div class="navbar">
   <a class="navbar-brand" href="#">Title</a>
-  <ul class="nav">
+  <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
@@ -3458,7 +3458,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Nav items are simple to add via unordered lists.</p>
     <div class="bs-docs-example">
       <div class="navbar">
-        <ul class="nav">
+        <ul class="nav navbar-nav">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Link</a></li>
           <li class="disabled"><a href="#">Disabled</a></li>
@@ -3466,32 +3466,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </div>
     </div><!-- /example -->
 {% highlight html linenos %}
-<ul class="nav">
+<ul class="nav navbar-nav">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Link</a></li>
   <li class="disabled"><a href="#">Disabled</a></li>
 </ul>
 {% endhighlight %}
-    <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
-    <div class="bs-docs-example">
-      <div class="navbar">
-        <ul class="nav">
-          <li class="active"><a href="#">Home</a></li>
-          <li class="divider"></li>
-          <li><a href="#">Link</a></li>
-          <li class="divider"></li>
-          <li><a href="#">Link</a></li>
-          <li class="divider"></li>
-        </ul>
-      </div>
-    </div><!-- /example -->
-{% highlight html linenos %}
-<ul class="nav">
-  ...
-  <li class="divider"></li>
-  ...
-</ul>
-{% endhighlight %}
 
     <h3 id="navbar-forms">Forms</h3>
     <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
@@ -3529,7 +3509,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
-          <ul class="nav">
+          <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
@@ -3565,7 +3545,7 @@ body {
       <div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
-          <ul class="nav">
+          <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
@@ -3601,7 +3581,7 @@ body {
       <div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
         <div class="container" style="width: auto;">
           <a class="navbar-brand" href="#">Title</a>
-          <ul class="nav">
+          <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
@@ -3628,7 +3608,7 @@ body {
           </button>
           <a class="navbar-brand" href="#">Title</a>
           <div class="nav-collapse collapse navbar-responsive-collapse">
-            <ul class="nav">
+            <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
@@ -3648,9 +3628,8 @@ body {
             <form class="navbar-form pull-left" action="">
               <input type="text" class="col-span-8" placeholder="Search">
             </form>
-            <ul class="nav pull-right">
+            <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
-              <li class="divider"></li>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                 <ul class="dropdown-menu">
@@ -3706,7 +3685,7 @@ body {
           </button>
           <a class="navbar-brand" href="#">Title</a>
           <div class="nav-collapse collapse navbar-inverse-collapse">
-            <ul class="nav">
+            <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
@@ -3726,9 +3705,8 @@ body {
             <form class="navbar-form pull-left" action="">
               <input type="text" class="col-span-8" placeholder="Search">
             </form>
-            <ul class="nav pull-right">
+            <ul class="nav navbar-nav pull-right">
               <li><a href="#">Link</a></li>
-              <li class="divider"></li>
               <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                 <ul class="dropdown-menu">
diff --git a/less/navbar.less b/less/navbar.less
index 78b837bdf..587b69ca4 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -15,31 +15,30 @@
 // Navbar nav links
 // -------------------------
 
-.navbar {
-  .nav {
-    // space out from .navbar .brand and .btn-navbar
-    margin-top: 15px;
-  }
-  .nav > li > a {
+.navbar-nav {
+  // Space out from .navbar .brand and .btn-navbar
+  margin-top: 15px;
+
+  > li > a {
     padding-top: ((@navbar-height - @line-height-base) / 2);
     padding-bottom: ((@navbar-height - @line-height-base) / 2);
     color: @navbar-link-color;
     line-height: 20px;
   }
-  .nav > li > a:hover,
-  .nav > li > a:focus {
+  > li > a:hover,
+  > li > a:focus {
     color: @navbar-link-hover-color;
     background-color: @navbar-link-hover-bg;
   }
-  .nav > .active > a,
-  .nav > .active > a:hover,
-  .nav > .active > a:focus {
+  > .active > a,
+  > .active > a:hover,
+  > .active > a:focus {
     color: @navbar-link-active-color;
     background-color: @navbar-link-active-bg;
   }
-  .nav > .disabled > a,
-  .nav > .disabled > a:hover,
-  .nav > .disabled > a:focus {
+  > .disabled > a,
+  > .disabled > a:hover,
+  > .disabled > a:focus {
     color: @navbar-link-disabled-color;
     background-color: @navbar-link-disabled-bg;
   }
@@ -80,7 +79,7 @@
   max-width: 200px;
   margin-left: auto;
   margin-right: auto;
-  padding: 7px 15px;
+  padding: 15px;
   font-size: 18px;
   font-weight: 500;
   line-height: @line-height-base;
@@ -122,11 +121,6 @@
   }
 }
 
-// Dividers in navbar
-.navbar .nav > .divider {
-  .nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
-}
-
 // Navbar form
 .navbar-form {
   .navbar-vertical-align(34px); // Vertically center in navbar
@@ -135,19 +129,19 @@
 // Dropdown menus
 
 // Menu position and menu carets
-.navbar .nav > li > .dropdown-menu {
+.navbar-nav > li > .dropdown-menu {
   margin-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 // Menu position and menu caret support for dropups via extra dropup class
-.navbar-fixed-bottom .nav > li > .dropdown-menu {
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 // Dropdown menu items and carets
-.navbar .nav {
+.navbar-nav {
   // Caret should match text color on hover
   li.dropdown > a:hover .caret,
   li.dropdown > a:focus .caret {
@@ -175,8 +169,8 @@
 }
 
 // Right aligned menus need alt position
-.navbar .pull-right > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
+.navbar-nav.pull-right > li > .dropdown-menu,
+.navbar-nav > li > .dropdown-menu.pull-right {
   left: auto;
   right: 0;
 }
@@ -202,25 +196,27 @@
     color: @navbar-inverse-text;
   }
 
-  .nav > li > a {
-    color: @navbar-inverse-link-color;
-  }
-  .nav > li > a:hover,
-  .nav > li > a:focus {
-    color: @navbar-inverse-link-hover-color;
-    background-color: @navbar-inverse-link-hover-bg;
-  }
-  .nav > .active > a,
-  .nav > .active > a:hover,
-  .nav > .active > a:focus {
-    color: @navbar-inverse-link-active-color;
-    background-color: @navbar-inverse-link-active-bg;
-  }
-  .nav > .disabled > a,
-  .nav > .disabled > a:hover,
-  .nav > .disabled > a:focus {
-    color: @navbar-inverse-link-disabled-color;
-    background-color: @navbar-inverse-link-disabled-bg;
+  .navbar-nav {
+    > li > a {
+      color: @navbar-inverse-link-color;
+    }
+    > li > a:hover,
+    > li > a:focus {
+      color: @navbar-inverse-link-hover-color;
+      background-color: @navbar-inverse-link-hover-bg;
+    }
+    > .active > a,
+    > .active > a:hover,
+    > .active > a:focus {
+      color: @navbar-inverse-link-active-color;
+      background-color: @navbar-inverse-link-active-bg;
+    }
+    > .disabled > a,
+    > .disabled > a:hover,
+    > .disabled > a:focus {
+      color: @navbar-inverse-link-disabled-color;
+      background-color: @navbar-inverse-link-disabled-bg;
+    }
   }
 
   // Darken the responsive nav toggle
@@ -235,32 +231,29 @@
     }
   }
 
-  // Darken dividers
-  .nav > .divider {
-    background-color: darken(@navbar-inverse-bg, 5%);
-    border-bottom-color: lighten(@navbar-inverse-bg, 5%);
-  }
-
   // Dropdowns
-  .nav li.dropdown.open > .dropdown-toggle,
-  .nav li.dropdown.active > .dropdown-toggle,
-  .nav li.dropdown.open.active > .dropdown-toggle {
-    background-color: @navbar-inverse-link-active-bg;
-    color: @navbar-inverse-link-active-color;
-  }
-  .nav li.dropdown > a:hover .caret {
-    border-top-color: @navbar-inverse-link-hover-color;
-    border-bottom-color: @navbar-inverse-link-hover-color;
-  }
-  .nav li.dropdown > .dropdown-toggle .caret {
-    border-top-color: @navbar-inverse-link-color;
-    border-bottom-color: @navbar-inverse-link-color;
-  }
-  .nav li.dropdown.open > .dropdown-toggle .caret,
-  .nav li.dropdown.active > .dropdown-toggle .caret,
-  .nav li.dropdown.open.active > .dropdown-toggle .caret {
-    border-top-color: @navbar-inverse-link-active-color;
-    border-bottom-color: @navbar-inverse-link-active-color;
+  .navbar-nav {
+    li.dropdown.open > .dropdown-toggle,
+    li.dropdown.active > .dropdown-toggle,
+    li.dropdown.open.active > .dropdown-toggle {
+      background-color: @navbar-inverse-link-active-bg;
+      color: @navbar-inverse-link-active-color;
+    }
+    li.dropdown > a:hover .caret {
+      border-top-color: @navbar-inverse-link-hover-color;
+      border-bottom-color: @navbar-inverse-link-hover-color;
+    }
+    li.dropdown > .dropdown-toggle .caret {
+      border-top-color: @navbar-inverse-link-color;
+      border-bottom-color: @navbar-inverse-link-color;
+    }
+    li.dropdown.open > .dropdown-toggle .caret,
+    li.dropdown.active > .dropdown-toggle .caret,
+    li.dropdown.open.active > .dropdown-toggle .caret {
+      border-top-color: @navbar-inverse-link-active-color;
+      border-bottom-color: @navbar-inverse-link-active-color;
+    }
+
   }
 }
 
@@ -270,28 +263,28 @@
 // --------------------------------------------------
 
 @media screen and (min-width: @screen-tablet) {
+
   .navbar {
     padding-top: 0;
     padding-bottom: 0;
   }
   .navbar-brand {
     float: left;
-    padding-top: ((@navbar-height - @line-height-base) / 2);
-    padding-bottom: ((@navbar-height - @line-height-base) / 2);
-    margin-left: -10px;
+    margin-left: -5px;
+    margin-right: 5px;
   }
   .navbar .nav {
     float: left;
     margin-top: 0; // undo top margin to make nav extend full height of navbar
-    .clearfix();
+
+    > li {
+      float: left;
+    }
 
     &.pull-right {
       float: right;
     }
   }
-  .navbar .nav > li {
-    float: left;
-  }
 
   // Dividers go vertical
   // Change the height and height, disable bottom border, then add right border
@@ -307,16 +300,6 @@
     border-right-color: lighten(@navbar-inverse-bg, 5%);
   }
 
-  .navbar-fixed-left {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .navbar-fixed-left .navbar-brand,
-  .navbar-fixed-left .nav,
-  .navbar-fixed-left .nav > li {
-    float: none;
-  }
-
   // Required to make the collapsing navbar work on regular desktops
   .navbar-toggle {
     position: relative;