Menu icon Foundation
Change top bar breakpoint Foundation 6.5.1 CSS

I've been searching and searching for how I can change just the top bar breakpoint in Foundation 6.5.1. I've searched the forums, but all I see is how to do it using SASS. I'm using CSS though, haven't learned SASS yet. So is there a way to change just the breakpoint of the top bar. I don't want to change the medium and small breakpoints just when the top bar changes to the small screen menu with the hamburger menu icon.

F6.5.1breakpointtop bartop-bar

I've been searching and searching for how I can change just the top bar breakpoint in Foundation 6.5.1. I've searched the forums, but all I see is how to do it using SASS. I'm using CSS though, haven't learned SASS yet. So is there a way to change just the breakpoint of the top bar. I don't want to change the medium and small breakpoints just when the top bar changes to the small screen menu with the hamburger menu icon.

Carolyn Lee 7 months ago

I've searched everywhere and studied the css files, but I just cannot figure out how to change only the top bar breakpoint. I know I could probably change the medium breakpoint, but then other things would also change. Is it possible to only change the top bar breakpoint so that it will go to small version at a little bit larger size.

Anyone know?

Carolyn Lee 7 months ago

Anyone?

Alex Labanino 6 months ago

Go to _navigation.scss and change hide for and show-for. If you want the hamburger to fire-up in the large breakpoint, just change medium for large.

// Navigation breakpoints
.mobile-menu,
.site-title-bar {
  @include hide-for(medium);
}

.desktop-menu,
.site-navigation .top-bar-left {
  @include show-for(medium);
}

If you want to add new breakpoints just add them to _settings.scss :

// 2. Breakpoints
// --------------

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

Read for more details: https://zurb.com/university/lessons/get-control-of-foundation-s-default-breakpoints