Archived topic
Customize mobile menu
5 replies · Started by Andreas-Ralf on November 2, 2020
Hello,
I want to reduce the number of items displayed in the mobile primary navigation menu.
I already reduced the mobile menu breaking point to 0. Now it shows all 5 items but there are 2 lines. I want to have only 2-3 items displayed on a single line.
If possible I would like to have on desktop as navigation menu: Home Blog Archives Contact Newsletter and for the mobile navigation: Home Blog
Is there a not too complicated way to do it?
Hi there,
Have you considered using the off canvas panel on mobile?
https://docs.generatepress.com/article/off-canvas-panel-overview/
It allows you to set a different menu than the desktop one.
We are using the same idea on this site.
Let me know :)
I don't want to use an off canvas panel at all. The idea is that I want a quick overview of the items without making visitors click too much or take them off to another menu.
I have only a few items on the menu. My other idea was to reduce the number of items to 2-3, but it looks a bit empty on the desktop version.
It's a bit unfortunate that all themes use the burger menu option. It would be great if you would offer themes that have other visual options. Becaues everything else is really awesome.
I understand if there is too much coding involved. I'm not an expert, just asking. I will see in this case if I can get it done by a developer.
Hi there,
the simple fix is to edit the Menu and enable the Custom CSS classes:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Then in each of the menu items you don't want to be displayed on mobile give them a class off:
hide-on-mobile
That was super simple and it looks now how I wanted.
Thanks a lot for your help.
Glad to be of help
