[Resolved] sub-menu on click for mobile off-canvas menu

[Stephen]

Firstly apologies if this topic has already been covered elsewhere in this forum. I spent a good while looking but none of the topics I could find seemed to discuss this particular issue i’m having.

On the main desktop menu I have hidden the sub-menu toggle carets and want the sub-menus to open on hover of the parent menu item. This part works just as I would like it to.

For the mobile menu I have setup a separate menu and set this to off-canvas. On this menu the sub-menus also open on hover but I need them to open on click and stay open until the parent menu item is clicked again to close. I have tried everything I can think of but with no luck. Currently the bit of CSS I have for the mobile sub-menus is:

.slideout-navigation .sub-menu {
display: block!important;
pointer-events: auto;
opacity: 1;
}

Any help would be greatly appreciated.

Cheers,

Stephen

[Ying]

On this menu the sub-menus also open on hover but I need them to open on click and stay open until the parent menu item is clicked again to close

1. There’s no hover action on mobile, so it should be clicked open by default.

2. To make the submenu stay open until the parent menu item is clicked will require custom JavaScript, it’s not something adding CSS will work, unfortunately.

[Stephen]

Ah ok. Thank you Ying. One more related question if that is ok?:

Is there a way to close a sub-menu on click when on mobile? At the moment when view on mobile, the menu opens on click as you say but clicking the parent menu item again doesn’t then close it. Also seem to be having trouble clicking on subsequent submenus once I have clicked on the one above. For example, if I click on ‘about’ to open its sub-menu, and then try clicking on ‘training and events’ to open that sub-menu then it is instead opening the sub-menu for resources so something strange is going on. You should be able to see what I mean by visiting the bypass link I shared?

[Ying]

Can you try to remove this CSS and test again?

.slideout-navigation .sub-menu {
display: block!important;
pointer-events: auto;
opacity: 1;
}

[Stephen]

That works for mobile mow which is great – thank you. Now I can open and close the sub-menus when viewing the site on e.g a phone.

Is it possible to have this work on the mobile menu for non-mobile devices also? For example when viewing on my laptop, the menus no longer open at all having removed this bit of CSS. This works on another site i’m building using Generate Press (included bypass link for this site also) but replicating that code and setup on this site doesn’t produce the same results. Thought it might be a plugin conflict but tried disabling to test this. Just conscious that a visitor might happen to have the viewport smaller on their laptop at the breakpoint for the mobile menu and not be able to use the menu.

Thank you for your help with this Ying.

[Stephen]

Actually that looks like it is working now. Thank you so much for your help Ling. Greatly appreciated! I hope you have a lovely weekend.

[Ying]

Thanks Stephen, enjoy your weekend 🙂

[Author]

Posts