Adjusting Mobile Menu Behavior for Parent Categories

Hello,

On the mobile version of my site, the menu currently displays categories, and when clicking on the arrow, the categories expand to show subcategories or sub-subcategories. This behavior works perfectly for me.

However, the parent categories at the first level are also clickable, and I would like to disable this behavior. Instead, I want clicking on the parent category name to perform the same action as the arrow, expanding the menu to show subcategories.

How can I achieve this?

Thank you.

Hi lost.hinata,

Thanks for reaching to us and appreciate your patience.

Navigate to Theme Settings > Custom JS > Add the following code.

jQuery('.mobile-nav').on('click', '.wd-nav-mobile > li.menu-item-has-children > a', function(e){
   e.preventDefault();
   jQuery(this).parent().find('.wd-nav-opener').click();
});

Regards,

Thanks alot, its perfect 🙂
J’ai ajouté des un autre niveau de menu, pouvouvz me fornur un nouveau js à jour ?
Merci

exemple :

MOBILIER
-BANCS
— bancs en bois
— bancs en fer
….

Update :

Sometimes I will add a subcategory under a parent category.
Could you please let me know how to update your JavaScript code so that these menus behave the same as the rest now?

Thank you!

Hi,

Apologies for the misunderstanding. To resolve your issue, you need to remove the custom code we provided in the previous response: https://xtemos.com/forums/topic/adjusting-mobile-menu-behavior-for-parent-categories/#post-631358. After that, go to the mobile menu header element settings and select Submenu opening action → Label and arrow like it shown on screenshot: https://monosnap.com/file/oaXL5ylkCPZo2qmxGLUa77QvWp3H9Y.

Kind Regards

[Author]

Posts