Enable scrollable responsive nav bar

Fixes #9007 in a hopefully decent way

1 files changed, 22 insertions, 0 deletions

diff --git a/less/navbar.less b/less/navbar.less
index 374327f12..98ad5383c 100644
--- a/less/navbar.less
+++ b/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