Foundation 5 Top Bar Breakpoint

Here’s a quick tip that’s sure to ease a couple of headaches: use your _settings.scss partial to change the Foundation 5 top bar breakpoint.

At first, I wasn’t sure how to go about this, because 1) I’m not too familiar with Foundation 5 and 2) I tried uncommenting a line in the _settings.scss file to override the preset, but doing so caused an error. A quick search online brought up a solution that won’t work for people using Sass.

This is a super-quick solution, and the cleanest.

Open your _settings.scss file and find the following lines:

// $topbar-breakpoint: #{upper-bound($medium-range)};
// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";

Uncomment those two lines. Let your Sass compile and see that you’re getting an error. The reason is that the lines setting the breakpoint variables are also commented out. Do a search on “Media Query Ranges” and uncomment all of the range variables you see below that line. Those are the breakpoints. Check for errors again… all clear!

You still don’t have a change in your top bar breakpoint. Pick one of the breakpoint variables you uncommented (I’m going for $large-range, which should fit a reasonably sized menu comfortably) and go back to the top bar settings:

$topbar-breakpoint: #{upper-bound($large-range)};
$topbar-media-query: "only screen and (min-width: #{upper-bound($large-range)})";

Save and take a look at the Sass compiler. There’s no errors, so go ahead and test the site out. Change the size of the browser a few times to see how the new top bar breakpoint settings are working. At this point, there’s still a problem. The mobile menu shows up to a very large screen size before switching to desktop mode. Why is that?

Both $topbar-breakpoint and $topbar-media-query are using “upper-bound” to get the highest value from the breakpoint variables they’re given. Looking back at the $large-range variable, it is actually an array with two values: 64.063em and 90em. That “upper-bound” is telling Foundation to use that 90em value as the breakpoint, but that’s much too wide. Let’s go back to the Foundation top bar settings and fix that:

$topbar-breakpoint: #{lower-bound($large-range)};
$topbar-media-query: "only screen and (min-width: #{lower-bound($large-range)})";

Save, let the Sass compile, and then check it out in your browser again. This time, the top bar will break out of mobile mode and into desktop mode at a reasonable 64em screen width. This gives you a Foundation 5 top bar that is in mobile menu on small tablets and shows its desktop mode on an iPad in landscape orientation (i.e., a screen width of 1024 pixels).

Read more about Foundation 5 top bar settings in the official documentation.

Leave a Reply