Refactor navbar dividers

* Instead of .divider-vertical, use .divider
* Makes use of .nav-divider mixin
* Dividers are horizontal to start, matching the default state of navbar nav links
* Dividers become vertical above 768px via media queries

2 files changed, 21 insertions, 10 deletions

diff --git a/less/mixins.less b/less/mixins.less
index 3282bd10e..71ca3dfef 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -377,7 +377,7 @@
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider(@top: #e5e5e5, @bottom: #fff) {
   height: 1px;
-  margin: ((@line-height-base / 2) - 1) 1px; // 8px 1px
+  margin: ((@line-height-base / 2) - 1) 0;
   overflow: hidden;
   background-color: @top;
   border-bottom: 1px solid @bottom;
diff --git a/less/navbar.less b/less/navbar.less
index 2a6824e06..1af0c499a 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -104,11 +104,8 @@
 }
 
 // Dividers in navbar
-.navbar .divider-vertical {
-  height: @navbar-height * .6;
-  margin: (@navbar-height * .2) 9px;
-  border-left: 1px solid darken(@navbar-bg, 5%);
-  border-right: 1px solid lighten(@navbar-bg, 5%);
+.navbar .nav > .divider {
+  .nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
 }
 
 // Navbar form
@@ -204,10 +201,10 @@
     background-color: #444;
   }
 
-  // Darken divider borders
-  .divider-vertical {
-    border-left-color: darken(@navbar-inverse-bg, 5%);
-    border-right-color: lighten(@navbar-inverse-bg, 5%);
+  // Darken dividers
+  .nav > .divider {
+    background-color: darken(@navbar-inverse-bg, 5%);
+    border-bottom-color: lighten(@navbar-inverse-bg, 5%);
   }
 
   // Dropdowns
@@ -262,6 +259,20 @@
     float: left;
   }
 
+  // Dividers go vertical
+  // Change the height and height, disable bottom border, then add right border
+  .navbar .nav > .divider {
+    width: 1px;
+    height: @navbar-height * .6;
+    margin: (@navbar-height * .2) 9px;
+    border-bottom: 0;
+    border-right: 1px solid lighten(@navbar-bg, 5%);
+  }
+  // Since we override the border, we need to specify it again for inverted navbars
+  .navbar-inverse .nav > .divider {
+    border-right-color: lighten(@navbar-inverse-bg, 5%);
+  }
+
   // Required to make the collapsing navbar work on regular desktops
   .navbar .btn-navbar {
     display: none;