Changing responsive menu toggle breakpoint

[MarineLB]

Hello !
I am trying to change the breakpoint where the title bar is displayed instead of the normal desktop menu. It is changing for medium up but I find it too small.
I can't seem to find where to change that. I tried the data-hide-for attribute, and changing the breakpoint in _navigation.scss but none of this is working.

Any ideas ?
Thank you

[MarineLB]

You can check my website here : https://lesdeuxvagues.com/kameojune/v2
user : github
passsword : github

The menu is overlapping with the logo and that's why i want to make the toggle happen sooner.

[kallkwik]

Just change the code in the navigation.scss file to:

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

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

Then change the header.php from medium to large as well.

[MarineLB]

Thanks for your help!

Would it work with, say, "800px", instead of "large" ?

[MarineLB]

I forgot.. I had already tried that but there is no "medium" in header.php

[kallkwik]

Hi you can also use data-hide-for="large" on your title bar to hide the menu on large or above. Then the code above should activate the tablet menu earlier.

You can change the small / medium / large breakpoints in the settings.scss file.

[labanino]

Go to breakpoints in _settings.scss and change the width of medium :

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

$breakpoints: (
  small: 0,
  medium: 640px, // E.g. by default is 640px, change it to whatever you want it to be
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);