Collapsed navigation menu, closing after click unless it's a sub-menu heading

[Bacchus]

I’m using a collapsed navigation menu on a one-page layout. It’s the only navigation menu on the site and is common to both desktop and mobile layouts for consistency.

I am also using the following jquery from this support forum to close the menu after a link is chosen so the menu isn’t in the way of the page contents.

jQuery(function($) {
$(’.x-menu-collapsed .x-anchor’).on( “click touchstart”, function() {
$(’.x-off-canvas-close’).click();
});
});

That’s all working perfectly both on mobile and on the desktop.

The problem is that my menu has sub-menu headers and when the viewer clicks on those headers to expand the menu, the entire menu closes and they have to open it again to see the now expanded sub-menu.

Example:

Topic1 – #topic1
Topic2 – #topic2
Topic3 – # //this is just a header
Subtopic A – #topic3SubA
Subtopic B – #topic3SubB
Topic4 – #topic4

So if someone clicks on Topic3 to expand the submenu to get to Subtopic A, the whole menu closes and they have to reopen it to click on the Subtopics. I want to keep the menu close behaviour on Topics 1, 2 & 4 and Subtopic A & B, but NOT on Topic3.

The headers are created using just a # so they don’t effectively link anywhere, but just function as headers. I’m thinking I need to modify the jquery to ignore any link that is just # instead of #something. Is that correct? Is there an easy way of doing that or is there an entirely different approach that is better?

I’m developing this on my computer (i.e. localhost) so I can’t really provide access but I can provide screenshots or code snippets or anything else anyone might need to help me out.

Thanks so much in advance for any help!

[nico]

Hi @Bacchus,

Thanks for writing in.

This is a custom coding. I could not guarantee you that we could help you regarding this issue because it is beyond the scope of our support. However we could try and check it but it would be best that we could replicate your setup in our setup or we could see it on a online site where it is on a dev mode.

Thank you for understanding.

[Bacchus]

I understand this might be slightly custom coding but, it seems like it could be a common problem across other people’s sites. To make this easier, is there perhaps a different way of handling the menu headings? Is there a way to make headings such that they are not “dummy” links? Or is there a way to expand the submenu on hover thus negating the need to click altogether?

Thanks.

[Joao]

Hi There,

Since you are using PRO I would suggest you to create another menu on Appearance > Menu without sub menus, putting all menus on the same level, and you can assign this menu as your mobile menu.

I guess the UX would be much better, to make it clear that your other links are title we can provide you some CSS for those specific items to have a different color or difference background color.

Let us know your thoughts.

Thank you

[Bacchus]

The solution to this ended up being pretty simple, I’ll post for the benefit of others. Keep in mind, I’m new to WordPress, so this took me a while to figure out and may not be the most elegant solution…

First, make some changes to the menu being used:

1. Turn on the option to set classes on menu items via Appearance > Menus > Screen Options.
2. On all items that should close the menu on-click, I added a class called ‘menuLink’.
3. Save changes.

Now, it’s just a matter of modifying the code posted elsewhere on this forum by the support team and that I referenced in my original post. The jQuery should now read like this:

jQuery(function($) {
$(’.menuLink’).on(“click touchstart”, function() {
$(’.x-off-canvas-close’).click();
});
});

That’s it! Now the jQuery checks to make sure the item being clicked/touched is a member of the class “menuLink” and, if so, closes the menu. Otherwise, it will NOT close the menu and thus, headings can expand to show submenus, etc.

I’m sure others will find a more elegant solution or modify the code to be more flexible, but for me, it’s all I need at the moment. Hope this helps someone else

Thanks to the support team for taking the time to respond.

[Joao]

Thanks for sharing your solution!