Fixes twbs#8749: prevent navbar nav from overlapping navbar toggle

terrynie · Aug 7, 2013 · c3ac953 · c3ac953
1 parent 223e032
commit c3ac953
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
@@ -2811,7 +2811,6 @@ button.close {
 }
 
 .navbar-nav {
-  margin-top: 10px;
   margin-bottom: 15px;
 }
 
@@ -2893,6 +2892,11 @@ button.close {
   clear: both;
 }
 
+.navbar-toggle + .nav-collapse {
+  width: 100%;
+  margin-top: 50px;
+}
+
 @media (max-width: 768px) {
   .nav-collapse-scrollable {
     max-height: 360px;

diff --git a/dist/css/bootstrap.min.css b/dist/css/bootstrap.min.css
diff --git a/less/navbar.less b/less/navbar.less
@@ -20,8 +20,6 @@
 // -------------------------
 
 .navbar-nav {
-  // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
-  margin-top: 10px;
   margin-bottom: 15px;
 
   > li > a {
@@ -93,8 +91,16 @@
   padding-bottom: @navbar-padding-vertical;
   // Clear floated elements and prevent collapsing of padding
   .clearfix();
+
+  // When there is no `.navbar-brand` present (which normally sits between the
+  // navbar brand and toggle), prevent the nav from overlapping the toggle.
+  .navbar-toggle + & {
+    width: 100%;
+    margin-top: @navbar-height;
+  }
 }
 
+
 // Scrollable navbar navigation
 //
 // Sometimes you might have too many links in your fixed navbar and you need to