[Resolved] Off canvas menu on mobile — Make menu items function like arrows

[softrainwall]

I use primary menu for desktop and off canvas menu for mobile.

I use “#” URL for all parent items in my off canvas menu and it works almost exactly as I want with one exception: clicking on the menu item itself doesn’t close all other submenus that are opened, only clicking on its arrow does. I want to make my “#” menu items close all other dropdowns on click too, because in my case, being able to open more than one dropdown at a time can make the menu look confusing and lead to an uncomfortable amount of scrolling.

I was able to achieve this by selecting “Click – Menu item” option in Layout -> Primary Navigation -> Navigation Dropdown. However, I only want this for my mobile off-canvas menu, and this option obviously affects my desktop menu as well (which I want to keep as is, with dropdowns on hover).

[Tom]

Hi there,

I wonder if this might help?: https://generatepress.com/forums/topic/slide-out-menu-close-sub-menu-items/

Let me know 🙂

[softrainwall]

Just tried it on both desktop and mobile, and it doesn’t seem to work. The hook does appear in the page’s source so I’m guessing I’ve added it correctly.

[David]

Hi there,

can you share a link to the site with that code added so we can see whats going on?

[softrainwall]

Sure, I’m including a link to the site & login credentials in the private info field. I’ve also temporarily enabled off-canvas menu on desktop for testing

[Tom]

Can you try the updated code?: https://generatepress.com/forums/topic/slide-out-menu-close-sub-menu-items/#post-795721

[softrainwall]

It works now! Thank you for help 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts