Change breakpoint when desktop menu switches to mobile menu

[legpe]

Hi,
Is there a way in X to change the break point – the pixel width of the browser window – for when the desktop menu switches to the mobile menu?

Regards,
Lars

[friech]

Hi Lars,

Thank you for writing in, regretfully that is not a feature offered by standard X menu. It can be possible with custom CSS but that might cause breakpoints issue. You might want to utilize the UberMenu extension instead.

UberMenu - Custom Breakpoint

Cheers!

[legpe]

Thanks,
Before I install Ubermenu, I have to ask about what you write on the page you refer me to:

"Troubleshooting
If you have your menu right you may need to add some custom CSS to get menu items aligned correctly, including the cart and search icon. UberMenu provides the code needed along with further explanation Here40. As we’ve provided direct integration you don’t need to take the manual integration steps of modifying template files.”

Will I need to add some custom CSS to get my menu items aligned correctly, as my menu is right aligned? The information is a bit confusing – you write in the text above that I don’t need to take the manual integration steps but do I need to add some custom CSS to get my menu items aligned correctly and do I need to do any ”mobile refinement” with CSS, as it states on the Sevenspark page you link to (Here40) in the Troubleshooting text above?

I just want to know what manual modifying I will have to do, before installing Ubermenu.

Regards,
Lars

[jade]

Hello Lars,

Basically, when you install UberMenu, the menu might look different than the default menu as UberMenu will have its own styling. As for X, there are some options where you can a link to the cart page if you have Woocommerce installed, and also a search link. These two links will be icons instead of a text link unlike normal menu items which you can see here for example. These icons might not align correctly with the text when you use UberMenu as it has its own CSS so you will need to add a bit of custom CSS to correct the alignment.

If using UberMenu is too much for your setup, you may refer to these related threads on how to change the breakpoint for the mobile menu:

https://theme.co/apex/forum/search?q=change%20mobile%20breakpoint%20menu

Hope this helps.

[legpe]

Thanks,

I suppose if I install and activate Ubermenu, and I don’t think it works well for my site, then if I disable Ubermenu everything is reset as it is right now in the menu, before installing Ubermenu?

The second method, to introduce custom CSS in the X theme, seems to be uncertain since there are so many different code suggestions from you?

Regards,
Lars

[jade]

Hi Lars,

@legpe

I suppose if I install and activate Ubermenu, and I don’t think it works well for my site, then if I disable Ubermenu everything is reset as it is right now in the menu, before installing Ubermenu?

That is correct, you can always uninstall UberMenu and the main menu will reset back to the default menu.

@legpe

The second method, to introduce custom CSS in the X theme, seems to be uncertain since there are so many different code suggestions from you?

This question has been asked several times in the forums and the codes to achieve this might differ but they should do the same thing. Kindly take time and go over the related threads and see which CSS code you are more comfortable working with.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Thank you.