CODEWITHSUNDEEP
javascriptsasszurb-foundationzurb-foundation-5
Philip
Philip

Reputation: 7166

Foundation5 - Changing topbar breakpoint

I'm trying to change the topbars breaking point and have succeeded in some way. The visual way. But the part where you toggle it wont work until you go into small view size.

I've changed these settings. Is there something more I need to change in order to set the new breakpoint? JS? SASS?

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

If I look at the meta for the topbar in the generated HTML. I find this tag:

<meta class="foundation-mq-topbar">

Which contains of:

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em;
}

Upvotes: 0

Views: 116

Answers (1)

Colin Marshall
Colin Marshall

Reputation: 2142

First, make sure you are editing the top-bar settings using _settings.scss file and not the _top-bar.scss file. You should not edit any of the Foundation components directly.

If you only change the $topbar-breakpoint value it should work. Leave the $topbar-media-query to its default value. You also should remove the !default flag. 

$topbar-breakpoint: #{lower-bound($large-range)}; // Change to 9999px for always mobile layout
$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";

Upvotes: 1

Related Questions