Menu icon Foundation
How to change breakpoints for topbar in F6?

Hello,

I started a new Project using Foundation 6.
I have a lot of stuff in my topbar, so when it comes to a smaller size it doesn't look good anymore.
Now i would like to change the breakpoints of the topbar.
My Idea is to add a new breakpoint at 800px and change the value of data-hide-for to the new breakpoint.
I already tried to change the breakpoint of medium to 800px in the settings, but nothing changed. The topbar still toggles at 640px like i havent changed anything.

Idea:

 

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

 

 <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="navbar-bp">
    <button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
  </div>

Does anybody have a solution for my problem ?




 

topbarbreakpointsfoundation 6top-barResponsiveresponsive topbartopbar breakpoints

Hello,

I started a new Project using Foundation 6.
I have a lot of stuff in my topbar, so when it comes to a smaller size it doesn't look good anymore.
Now i would like to change the breakpoints of the topbar.
My Idea is to add a new breakpoint at 800px and change the value of data-hide-for to the new breakpoint.
I already tried to change the breakpoint of medium to 800px in the settings, but nothing changed. The topbar still toggles at 640px like i havent changed anything.

Idea:

 

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

 

 <div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="navbar-bp">
    <button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
  </div>

Does anybody have a solution for my problem ?




 

Toni Ke about 2 years ago

really nobody ?!!

Cesar about 2 years ago

You should be able to add your custom breakpoint in $breakpoints() in _settings.scss. Are you modifying the file directly or making a copy? Maybe, you have a stacking issue where your copy is either not importing or overriding Foundations default. I recently dealt with this same issue and turned out I was not importing my copy of _settings.scss correctly.

I did the following:

// Copy of _settings.scss
$breakpoints: (
    small: 0,
    medium: 640px,
    xmedium: 840px, // Custom breakpoint
    large: 1024px,
    xlarge: 1200px,
    xxlarge: 1440px
);

// Global import app.scss
@import 'typeface/fonts';
@import 'core/variables';
@import 'core/settings'; // Copy of foundation _settings.scss
@import 'foundation';
@include foundation-everything;