Merge pull request #11188 from twbs/navbar_zindex_auto

Fixes #10433: Navbar z-index refactor

dist/css/bootstrap.css

@@ -4266,7 +4266,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
 
 .navbar {
   position: relative;
-  z-index: 1000;
   min-height: 50px;
   margin-bottom: 20px;
   border: 1px solid transparent;
@@ -4399,6 +4398,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
 }
 
 .navbar-static-top {
+  z-index: 1000;
   border-width: 0 0 1px;
 }
 
@@ -4413,6 +4413,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
   position: fixed;
   right: 0;
   left: 0;
+  z-index: 1030;
 }
 
 @media (min-width: 768px) {
@@ -4424,7 +4425,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
 
 .navbar-fixed-top {
   top: 0;
-  z-index: 1030;
   border-width: 0 0 1px;
 }
 

examples/navbar/navbar.css

 body {
-padding: 30px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .navbar {
-margin-bottom: 30px;
+  margin-bottom: 20px;
 }

examples/theme/index.html

@@ -159,6 +159,18 @@
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#contact">Contact</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
             </ul>
           </div><!--/.nav-collapse -->
         </div>
@@ -179,6 +191,18 @@
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#about">About</a></li>
               <li><a href="#contact">Contact</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
             </ul>
           </div><!--/.nav-collapse -->
         </div>

less/navbar.less

@@ -10,7 +10,6 @@
 
 .navbar {
   position: relative;
-  z-index: @zindex-navbar;
   min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
   margin-bottom: @navbar-margin-bottom;
   border: 1px solid transparent;
@@ -116,7 +115,9 @@
 
 // Static top (unfixed, but 100% wide) navbar
 .navbar-static-top {
+  z-index: @zindex-navbar;
   border-width: 0 0 1px;
+
   @media (min-width: @grid-float-breakpoint) {
     border-radius: 0;
   }
@@ -128,6 +129,7 @@
   position: fixed;
   right: 0;
   left: 0;
+  z-index: @zindex-navbar-fixed;
 
   // Undo the rounded corners
   @media (min-width: @grid-float-breakpoint) {
@@ -135,7 +137,6 @@
   }
 }
 .navbar-fixed-top {
-  z-index: @zindex-navbar-fixed;
   top: 0;
   border-width: 0 0 1px;
 }
@@ -153,6 +154,7 @@
   padding: @navbar-padding-vertical @navbar-padding-horizontal;
   font-size: @font-size-large;
   line-height: @line-height-computed;
+
   &:hover,
   &:focus {
     text-decoration: none;