Add $topbar-unstack-breakpoint to configure when the top bar switches from mobile...

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 4f2c6c65026301ceb2d6f1cbf9d8683c0a46ef16..6e5bdda87f4767cf2112591ffaca0724cebbccca 100644 (file)
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -26,6 +26,9 @@ $topbar-title-spacing: 1rem !default;
 /// @type Number
 $topbar-input-width: 200px !default;
 
+/// Breakpoint at which top bar switches from mobile to desktop view.
+$topbar-unstack-breakpoint: medium !default;
+
 /// Adds styles for a top bar container.
 @mixin top-bar-container {
   @if $global-flexbox {
@@ -45,7 +48,7 @@ $topbar-input-width: 200px !default;
     background-color: $topbar-background;
   }
 
-  // check if $topbar-background is differnt from $topbar-background-submenu
+  // Check if $topbar-background is differnt from $topbar-background-submenu
   @if ($topbar-background != $topbar-submenu-background) {
     ul ul {
       background-color: $topbar-submenu-background;
@@ -63,7 +66,7 @@ $topbar-input-width: 200px !default;
   }
 }
 
-/// makes sections stacked
+/// Makes sections of a top bar stack on top of each other.
 @mixin top-bar-stacked {
   @if $global-flexbox {
     flex-wrap: wrap;
@@ -84,6 +87,24 @@ $topbar-input-width: 200px !default;
   }
 }
 
+/// Undoes the CSS applied by the `top-bar-stacked()` mixin.
+@mixin top-bar-unstack {
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+
+    .top-bar-left,
+    .top-bar-right {
+      flex: 1 1 0px;
+    }
+  }
+  @else {
+    .top-bar-left,
+    .top-bar-right {
+      width: auto;
+    }
+  }
+}
+
 @mixin foundation-top-bar {
   // Top bar container
   .top-bar {
@@ -99,9 +120,11 @@ $topbar-input-width: 200px !default;
     }
   }
 
-  // Stack on small screens as default
-  @include breakpoint(small only) {
-    @include top-bar-stacked;
+  // Stack on small screens by default
+  @include top-bar-stacked;
+
+  @include breakpoint($topbar-unstack-breakpoint) {
+    @include top-bar-unstack;
   }
 
   // Sub-sections