Menu icon Foundation
How to change topbar breakpoints Foundation 6

Hi,

I'm hoping that someone can point me in the right direction here.

Where do I change the breakpoints for just the topbar in Foudation 6 e.g:-

My sites medium breakpoint starts at 768px and goes to 1023px but I want the topbar to go to mobile view at 910px instead of 767px.

Thanks

Baz

top-bartopbarfoundation 6breakpointsResponsivefoundation 6 topbartopbar breakpoints

Hi,

I'm hoping that someone can point me in the right direction here.

Where do I change the breakpoints for just the topbar in Foudation 6 e.g:-

My sites medium breakpoint starts at 768px and goes to 1023px but I want the topbar to go to mobile view at 910px instead of 767px.

Thanks

Baz

Stefan Reimert almost 3 years ago

Just adjust the size in the setting.scss and adjust or add another

Rafi Benkual almost 3 years ago

There is a variable for this in the setting file: $topbar-unstack-breakpoint

Vladimir over 2 years ago

@Rafi I have a problem with $topbar-unstack-breakpoint setting in my setting.scss file.

Right now I am trying to change breakpoint of my menu. Because I have a lots of links in it I wanted to show navigation on medium size like it is on small (hamurger icon as they call it). I tried to change default

$topbar-unstack-breakpoint: medium;

to

$topbar-unstack-breakpoint: large;

in hope that it will use the default breakpoints defined in _settings.scss

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

but whatever I do it always breaks on 640px.

 

Preston Cross over 2 years ago

@rafi has no clue why this option does not work. right out of the box.

Jarryd Fillmore over 2 years ago

Hmmm.. I've been wondering this as well. This was so easy in F5.

alex doumas 7 months ago

I have the same problem.

in F6 i change the breakpoint to large and the css follows the change but the js not. the burger icon appears but doesn't work if you dont go lower that medium resolution.

 

any suggestion?

Carolyn Lee 26 days ago

How would you change the medium breakpoint using css?