[Resolved] Mixing "Menu Hover"/"Menu Click" on mobile/desktop and primary/secondary menus

[Peter]

Hi GP,

right now in the settings i can choose between menu hover and menu click mode for all menus and devices at once only. For me at least, “menu hover” does accomplish anything close to user friendly behavior on secondary menu in mobile, as user has to figure out they have to click on tiny arrow to the far right (which is pretty hard to hit with thumb), while clicking in center accomplishes nothing, which limits me to using menu click exclusively.

How do I choose these option seperately for each device/menu combination?

For this site Im working on specifically right now I desire “hover” for secondary menyu on desktop and “click” for secondary menu on mobile. However it would be good to know in general how to accompish any given combination for the future.

Cheers.

[Tom]

Hi there,

Currently it would be quite difficult.

One thing you can do is add a different set of menu items just for mobile. You can do that by giving your menu items these classes: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

For the mobile menu items, set the parent menu item URL as: #

That will make it so the entire menu item can be tapped instead of just the arrow.

Let me know if you need more info 🙂

[Peter]

Ah that would work perfect, thanks Tom! This would additionally solve another irritation I had that the secondary+primary right on top of each other in mobile is a bit confusing. With this approach I assume I can just remove or hide the secondary all together in mobile and move all the items to the primary.

My menus are quite large now, anyone know a ready plugin to copy and bulk edit menus?

[Tom]

Hmm, I don’t know of any off by hand.. It would be nice if we could specify a completely separate menu for mobile. I’m working on that 🙂

[Author]

Posts