Enable scrollable responsive nav bar

Fixes #9007 in a hopefully decent way

_includes/nav-components.html

@@ -61,6 +61,8 @@
     <li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
     <li><a href="#navbar-static-top">Static top navbar</a></li>
     <li><a href="#navbar-responsive">Responsive navbar</a></li>
+    <li><a href="#navbar-scrollable">Scrollable responsive navbar</a></li>
+    <li><a href="#navbar-inverted">Inverted navbar</a></li>
   </ul>
 </li>
 <li><a href="#breadcrumbs">Breadcrumbs</a></li>

components.html

@@ -1326,7 +1326,49 @@ body { padding-bottom: 70px; }
     </div>
 
 
-    <h2>Inverted variation</h2>
+    <h2 id="navbar-scrollable">Scrollable responsive navbar</h2>
+    <p>For instances where you have too many items in your navbar to fight within the viewport of a small device, add <code>.nav-collapse-scrollable</code> to your navbar's <code>.nav-collapse</code> to set a <code>max-height</code> and smooth scrolling.</p>
+    <div class="bs-example">
+      <div class="navbar">
+        <div class="container">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-scroll-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Title</a>
+          <div class="collapse nav-collapse nav-collapse-scrollable bs-navbar-scroll-collapse">
+            <ul class="nav navbar-nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+            </ul>
+            <form class="navbar-form pull-left" action="">
+              <input type="text" class="form-control col-lg-8" placeholder="Search">
+            </form>
+          </div><!-- /.nav-collapse -->
+        </div><!-- /.container -->
+      </div><!-- /.navbar -->
+    </div><!-- /example -->
+{% highlight html %}
+<div class="navbar">
+  <div class="container">
+		...
+
+    <div class="collapse nav-collapse nav-collapse-scrollable">
+      ...
+    </div><!-- /.nav-collapse -->
+
+  </div><!-- /.container -->
+</div><!-- /.navbar -->
+{% endhighlight %}
+
+
+    <h2 id="navbar-inverted">Inverted variation</h2>
     <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
     <div class="bs-example">
       <div class="navbar navbar-inverse">

dist/css/bootstrap.css

@@ -2870,6 +2870,16 @@ button.close {
   margin-bottom: 0;
 }
 
+@media (max-width: 768px) {
+  .nav-collapse-scrollable {
+    max-height: 360px;
+    margin-bottom: 15px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
 .navbar-brand {
   display: block;
   max-width: 200px;

less/navbar.less

@@ -82,6 +82,8 @@
 }
 .navbar-fixed-top {
   top: 0;
+  .nav-collapse {
+  }
 }
 .navbar-fixed-bottom {
   bottom: 0;
@@ -89,6 +91,26 @@
 }
 
 
+// Scrollable navbar navigation
+//
+// Sometimes you might have too many links in your fixed navbar and you need to
+// maintain access to all that content. To help, add `.nav-collapse-scrollable`
+// to your `.nav-collapse` to prevent the the content from flowing past the max-
+// height of your browser.
+//
+// This is not automatically added to the `.navbar-fixed-top` because it causes
+// z-index bugs in iOS7 (possibly earlier).
+
+@media (max-width: @screen-small) {
+  .nav-collapse-scrollable {
+    margin-bottom: @navbar-padding-vertical;
+    max-height: 360px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
 
 //
 // Navbar optional components