Desktop menu minwidth setting - controlling when desktop menu switches to mobile menu

[JoeHudson]

Hi, is there a way to alter the switch width for going from desktop to mobile (collapsed) menu through the Pro editor?

ie. the @media (min-width: 1200px) that seems to be the default width to switch to the mobile style menu. it’s a little too wide for my purposes

I’ll only have a few top nav menu items so I’d like that menu to remain visible for smaller screen widths ideally.

If I can’t do it through the Pro editor and will need to edit the theme CSS, before I get stuck into that, could you offer any suggestions for how to do that in the cleanest, lowest maintenance way? Obviously my preference would be to be able to define the menu switch width in one place and not have it cause issues with other parts of the theme.

[lely]

Hi Joe,

If you are using Pro header builder, we can choose at what point to switch the menu to mobile. For Bar, Container or Elements, HIDE DURING BREAKPOINTS setting is available. We can use this settings to setup the switch of menu.
For example, we can create two bars. One is for desktop, the other is for mobile. On each of this Bar, go to Customize Tab > HIDE DURING BREAKPOINTS, set at what which screen you want this to show. Then build the content of each bar as you like it to show on intended screensize. No need for custom CSS.

For more information:

Hide During Breakpoint - Explained

Hope this helps.

[JoeHudson]

Brilliant, that works, thanks!

[friech]

We are delighted to assist you with this.

Cheers!