Change the Foundation Topbar Breakpoint in SASS

As standard, vanilla Zurb Foundation runs out of the box at a breakpoint of 741px for the change to a medium desktop view. Unfortunately, the topbar navigation is stupidly difficult to set independently of this breakpoint when using the SASS version. There are ways and means, but changing it will leave you with no hamburger mobile icon, thus with no way to open the mobile menu. This is how you change the Foundation topbar breakpoint in SASS.

The trick is to make a couple of adjustments, and throw in a couple of media queries, effectively creating an extra visibility class. Here’s how I did it:

Step 1: Change _settings.scss

First up, take a looking in _settings.scss. Scroll down to the topbar section, until you find (around line 1428):

// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: $medium-up

 

We’re going to uncomment these two lines and change them to:

$topbar-breakpoint: 1100px; // Change this to what you want the breakpoint to be $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;

Step 2 – Add Media Queries

Now to add some media queries:

.show-for-breakpoint {
    display: block;
    @media #{$topbar-media-query} { display: none; }
}
.hide-for-breakpoint {
    display: none;
    @media #{$topbar-media-query} { display: block; }
}

Step 3: Change Visibility In HTML

Now to change the visibility class for the top bar; find the following:

<div class="top-bar-container contain-to-grid show-for-small-only">

and change it to….

<div class="top-bar-container contain-to-grid hide-breakpoint">

Now you need to find….

<nav class="tab-bar show-for-small-only">

And change it to….

<nav class="tab-bar show-for-breakpoint">

All done! That’s how you change the Foundation topbar breakpoint in Sass.

Socially enable us...Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Share on Reddit0Share on StumbleUpon0Pin on Pinterest0Share on Tumblr

Leave a Reply