[Support request] Customize mobile menu

[Andreas-Ralf]

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?

[Leo]

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 🙂

[Andreas-Ralf]

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.

[David]

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

[Andreas-Ralf]

That was super simple and it looks now how I wanted.

Thanks a lot for your help.

[David]

Glad to be of help

[Author]

Posts