Fixes #11610: Add @grid-float-breakpoint-max to better link navbar behavior across viewports and improve customization.

Also addresses #10371, #10395, and #10465.

2 files changed, 10 insertions, 5 deletions

diff --git a/less/navbar.less b/less/navbar.less
index 7188703e5..ea284fede 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -213,7 +213,7 @@
     line-height: @line-height-computed;
   }
 
-  @media (max-width: @screen-xs-max) {
+  @media (max-width: @grid-float-breakpoint-max) {
     // Dropdowns get custom display when collapsed
     .open .dropdown-menu {
       position: static;
@@ -287,7 +287,7 @@
   .form-inline();
 
   .form-group {
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: @grid-float-breakpoint-max) {
       margin-bottom: 5px;
     }
   }
@@ -445,7 +445,7 @@
       }
     }
 
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: @grid-float-breakpoint-max) {
       // Dropdowns get custom display when collapsed
       .open .dropdown-menu {
         > li > a {
@@ -565,7 +565,7 @@
       }
     }
 
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: @grid-float-breakpoint-max) {
       // Dropdowns get custom display
       .open .dropdown-menu {
         > .dropdown-header {
diff --git a/less/variables.less b/less/variables.less
index 1775be080..8b5f2184d 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -247,8 +247,13 @@
 @grid-columns:              12;
 // Padding, to be divided by two and applied to the left and right of all columns
 @grid-gutter-width:         30px;
-// Point at which the navbar stops collapsing
+
+// Navbar collapse
+
+// Point at which the navbar becomes uncollapsed
 @grid-float-breakpoint:     @screen-sm-min;
+// Point at which the navbar begins collapsing
+@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
 
 
 // Navbar