From: Geoff Kimball Date: Tue, 1 Mar 2016 23:03:39 +0000 (-0800) Subject: Fix CSS for top bar stacking being in the wrong place, fixes #8307 X-Git-Tag: v6.2.1~81 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7a3fd7bd409d69eb3b50132380ea01910aeb0c58;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Fix CSS for top bar stacking being in the wrong place, fixes #8307 --- diff --git a/docs/pages/top-bar.md b/docs/pages/top-bar.md index 6e55999da..557da6814 100644 --- a/docs/pages/top-bar.md +++ b/docs/pages/top-bar.md @@ -43,7 +43,7 @@ In the below example, our top bar includes a [dropdown menu](dropdown-menu.html) --- -## Advanced +## Advanced Layout You can further divide a top bar into a title area and content area. Use the `.top-bar-title` class to create a title/branding area. Next to that can be any element, which is used for the rest of the content. @@ -94,6 +94,42 @@ In the below example, we've combined the above pattern with the Responsive Toggl --- +## Stacking + +By default, the two sections of a top bar will stack on top of each other on small screens. This can be changed by adding the class `.stacked-for-medium` or `.stacked-for-large`. + +```html +
+ +
+``` + +
+
+ +
+
+
    +
    • +
    • +
+
+
+ +--- + ## Sticky Navigation See the documentation for the [Sticky](sticky.html#sticky-navigation) plugin to see how to easily make a sticky nav bar. diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss index 2aa9bcf4c..0b898e53a 100644 --- a/scss/components/_top-bar.scss +++ b/scss/components/_top-bar.scss @@ -118,22 +118,22 @@ $topbar-unstack-breakpoint: medium !default; // Top bar container .top-bar { @include top-bar-container; - } - // Generate classes for stacking on each screen size (defined in $breakpoint-classes) - @each $size in $breakpoint-classes { - .stacked-for-#{$size} { - @include breakpoint($size down) { - @include top-bar-stacked; - } - } - } + // Stack on small screens by default + @include top-bar-stacked; - // Stack on small screens by default - @include top-bar-stacked; + @include breakpoint($topbar-unstack-breakpoint) { + @include top-bar-unstack; + } - @include breakpoint($topbar-unstack-breakpoint) { - @include top-bar-unstack; + // Generate classes for stacking on each screen size (defined in $breakpoint-classes) + @each $size in map-remove($breakpoint-classes, small) { + &.stacked-for-#{$size} { + @include breakpoint($size down) { + @include top-bar-stacked; + } + } + } } // Sub-sections @@ -152,7 +152,7 @@ $topbar-unstack-breakpoint: medium !default; .top-bar-title { float: left; margin-right: $topbar-title-spacing; - + } .top-bar-left { diff --git a/test/visual/top-bar/stacking.html b/test/visual/top-bar/stacking.html new file mode 100644 index 000000000..094cd8d7b --- /dev/null +++ b/test/visual/top-bar/stacking.html @@ -0,0 +1,58 @@ + + + + + + + Foundation for Sites Testing + + + +
+

Top Bar: Stacking

+ +

By default, a top bar stacks on the small breakpoint (< 640px).

+ +
+
+

Left

+
+
+

Right

+
+
+ +
+ +

This top bar should stack on medium and down.

+ +
+
+

Left

+
+
+

Right

+
+
+ +
+ +

This top bar should stack on large and down.

+ +
+
+

Left

+
+
+

Right

+
+
+
+ + + + + +