Refactor navbars to simplify things

* `.navbar-brand` is no longer centered, thus removing need for
max-width and a few lines of code
* Clear floats of `.navbar-brand` in the `.nav-collapse` like we did in
2.x, thus simplifying some clearing and other things.
* Restyle the `.navbar-toggle` button to align it's bars up with the
text and flow of the document.
* Restyle the `.navbar-brand` to not use padding on left/right as to
avoid negative margin and other fuckery. This limits the ability to put
a bg color on the brand, but I think that's fine for now.

1 files changed, 7 insertions, 18 deletions

diff --git a/less/navbar.less b/less/navbar.less
index e474f35bd6..0f4d5cd73a 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -20,8 +20,6 @@
 // -------------------------
 
 .navbar-nav {
-  margin-bottom: 15px;
-
   > li > a {
     padding-top: ((@navbar-height - @line-height-computed) / 2);
     padding-bottom: ((@navbar-height - @line-height-computed) / 2);
@@ -87,6 +85,8 @@
 }
 
 .nav-collapse {
+  // Prevent overlap of `.navbar-brand` and `.navbar-toggle`
+  clear: both;
   // Space out collapsed contents within the mobile navbar
   padding-bottom: @navbar-padding-vertical;
   // Clear floated elements and prevent collapsing of padding
@@ -127,16 +127,12 @@
 
 // Brand/project name
 .navbar-brand {
-  display: block;
-  max-width: 200px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: @navbar-padding-vertical @navbar-padding-horizontal;
+  float: left;
+  padding-top: @navbar-padding-vertical;
+  padding-bottom: @navbar-padding-vertical;
   font-size: @font-size-large;
-  font-weight: 500;
   line-height: @line-height-computed;
   color: @navbar-brand-color;
-  text-align: center;
   &:hover,
   &:focus {
     color: @navbar-brand-hover-color;
@@ -149,10 +145,9 @@
 .navbar-toggle {
   position: relative;
   float: right;
-  height: 34px;
-  width: 48px;
+  padding: 9px 10px;
   .navbar-vertical-align(34px);
-  padding: @padding-base-vertical @padding-base-horizontal;
+  margin-right: -10px;
   background-color: transparent;
   border: 1px solid @navbar-toggle-border-color;
   border-radius: @border-radius-base;
@@ -327,12 +322,6 @@
 
 @media screen and (min-width: @grid-float-breakpoint) {
 
-  .navbar-brand {
-    float: left;
-    margin-left: -(@navbar-padding-horizontal);
-    margin-right: 5px;
-    max-width: none; // Disables the default mobile setting
-  }
   .navbar-nav {
     float: left;
     // undo margin to make nav extend full height of navbar