Mobile menu dropdown on anchor menu item

Hi there,

the first menu item in the mobile menu has got subpages but the menu item itself is only an anchor on the homepage and no separate page. As for now the dropdown is only activated when the user clicks on the arrows on the right side. If the user clicks on the menu item nothing happens because it is only an anchor.

Is it possible to activate the dropdown only for the first menu item, when the user clicks on it?

Please have a look at the URL in the Secure Note.

Best regards

Hi,

To achieve this, add a class to your first menu item.

Then add this in Theme Options > JS


jQuery(function($) {
$( ".x-nav li.menu-item-2376" ).on( "click", function() {
    $(this).toggleClass('x-active');
    $(this).find("ul:first").toggleClass('x-collapsed');
});
});

Hope this helps

Hi there,

the menu item already has a css class: x-megamenu col-4, so I just added the recommended class.

It seems to work on a first glance.

Thank you!

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.