Navbar update

Addresses a few different cases where the navbar has and doesn't have a
container, and accordingly adjusts the padding and margin of key
elements.

1 files changed, 24 insertions, 12 deletions

diff --git a/less/navbar.less b/less/navbar.less
index e83606d913..ce598d0d20 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -30,15 +30,10 @@
 // styling of responsive aspects.
 
 .navbar-header {
-  padding-left:  @navbar-padding-horizontal;
-  padding-right: @navbar-padding-horizontal;
   .clearfix();
 
   @media (min-width: @grid-float-breakpoint) {
     float: left;
-    padding-left: 0;
-    padding-right: 0;
-    margin-right: @navbar-padding-horizontal;
   }
 }
 
@@ -69,8 +64,6 @@
 
   @media (min-width: @grid-float-breakpoint) {
     width: auto;
-    padding-right: 0;
-    padding-left:  0;
     border-top: 0;
     box-shadow: none;
 
@@ -88,6 +81,22 @@
 }
 
 
+// Both navbar header and collapse
+//
+// When a container is present, change the behavior of the header and collapse.
+
+.container > .navbar-header,
+.container > .navbar-collapse {
+  margin-right: -@navbar-padding-horizontal;
+  margin-left:  -@navbar-padding-horizontal;
+
+  @media (min-width: @grid-float-breakpoint) {
+    margin-right: 0;
+    margin-left:  0;
+  }
+}
+
+
 //
 // Navbar alignment options
 //
@@ -129,8 +138,7 @@
 
 .navbar-brand {
   float: left;
-  padding-top: @navbar-padding-vertical;
-  padding-bottom: @navbar-padding-vertical;
+  padding: @navbar-padding-vertical @navbar-padding-horizontal;
   font-size: @font-size-large;
   line-height: @line-height-computed;
   color: @navbar-brand-color;
@@ -140,6 +148,12 @@
     text-decoration: none;
     background-color: @navbar-brand-hover-bg;
   }
+
+  @media (min-width: @grid-float-breakpoint) {
+    .navbar > .container & {
+      margin-left: -@navbar-padding-horizontal;
+    }
+  }
 }
 
 
@@ -151,6 +165,7 @@
 .navbar-toggle {
   position: relative;
   float: right;
+  margin-right: @navbar-padding-horizontal;
   padding: 9px 10px;
   .navbar-vertical-align(34px);
   background-color: transparent;
@@ -175,9 +190,6 @@
   }
 
   @media (min-width: @grid-float-breakpoint) {
-    position: relative;
-    top: auto;
-    left: auto;
     display: none;
   }
 }