Fixes #10433: Navbar z-index refactor

* Resets the default navbar z-index to auto at a certain breakpoint
* Adds fixed navbar z-index var to fixed bottom navbar (previously only on fixed top navbar)

dist/css/bootstrap.css

@@ -4294,6 +4294,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
 
 @media (min-width: 768px) {
   .navbar {
+    z-index: auto;
     border-radius: 4px;
   }
 }
@@ -4413,6 +4414,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
   position: fixed;
   right: 0;
   left: 0;
+  z-index: 1030;
 }
 
 @media (min-width: 768px) {
@@ -4424,7 +4426,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
 
 .navbar-fixed-top {
   top: 0;
-  z-index: 1030;
   border-width: 0 0 1px;
 }
 

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

@@ -19,6 +19,7 @@
   .clearfix();
 
   @media (min-width: @grid-float-breakpoint) {
+    z-index: auto;
     border-radius: @navbar-border-radius;
   }
 }
@@ -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;