Menu icon Foundation
Foundation 6 - Top-Bar Mobile menu breakpoint change

I want the mobile menu to kick in at large screen size (not medium as currently set).

I found this code in _navigation.scss and changed to large but it's not working.

/* Navigation breakpoints */

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

#mobile-menu, .title-bar {
  @include hide-for(large);
}

How would I achieve this?

to-barmedia-queriesbreak-pointssettings

I want the mobile menu to kick in at large screen size (not medium as currently set).

I found this code in _navigation.scss and changed to large but it's not working.

/* Navigation breakpoints */

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

#mobile-menu, .title-bar {
  @include hide-for(large);
}

How would I achieve this?

Rafi Benkual over 3 years ago

You can set the hiding behavior of the title bar and desktop menu my changing the breakpoint in the markup

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">

You can change data-hide-for="medium" to large instead.

Forest Parks over 3 years ago

Thank you! This fixed it for me. Data-hide-for wasn't there but I just added it.