CODEWITHSUNDEEP
sasszurb-foundation
simen
simen

Reputation: 483

Edit the Foundation top-bar breakpoint, works but menu icon disappears

I'm using Zurb Foundation 5 for my website, but I need to change the top-bar breakpoint, since I have more menu items than what fits inside container.

I've googled and found out that I can overwrite this setting with the following(set BEFORE importing foundation):

$topbar-breakpoint: 880px; 
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";

This makes the main menu disappear at 880px, but no menu icon(burger icon) shows up until the default breakpoint 40.063em(it is set to display: none, see screenshot below).

https://www.dropbox.com/s/3as00ir47aluh4b/Screenshot%202014-05-12%2014.32.43.png

Any suggestions how I can change the breakpoint using scss?

Upvotes: 2

Views: 2753

Answers (1)

JAre
JAre

Reputation: 4756

Update:

You should modify foundation settings only if you have really good reason and there is no other way. Use this markup instead(It's the official way):

<nav class="top-bar show-for-large-up" data-topbar="">
   <!-- menu items for the wide screen -->
</nav>

<nav class="top-bar hide-for-large-up" data-topbar="">
   <!-- menu items for the medium and small screen -->
</nav>

It should be compatible with the future versions of the Foundation out of the box and save you a lot of time in maintenance and you will have less bugs to catch.

Upvotes: 1

Related Questions