Submenu opens on click but doesn't close on click

[aiad_development]

Hello,

I wanted to open the submenu on click as the parent was just a title (not an actual page). Original submenu only opened on hover.

I found an old x theme topic answer and it advise to add this to JS:

jQuery( function($) {

$('.x-navbar .desktop .x-nav>li.menu-item-has-children > a span').append('<i style="display:inline-block; padding: 2px 3px; position: relative; bottom:-1px;" class="x-icon arrow" data-x-icon="&#xf103;"></i>');

$(document).ready ( function() {

$('.x-navbar .desktop .x-nav>li.menu-item-has-children > a').on('mouseover', function(e){ e.stopPropagation(); } );

$('.x-navbar .desktop .x-nav>li.menu-item-has-children > a span .arrow').on('click', function(e){

e.stopPropagation();
e.preventDefault();

$('.x-navbar .desktop .x-nav>li.menu-item-has-children').removeClass('x-active');
$(this).parent().parent().parent().toggleClass('x-active');

} );

} );

} );

and then add this to the css:

.x-navbar .desktop .x-nav li>a>span:after {
display: none !important;
}

I have done that and it worked, however, the submenu now opens on click but just stays open. When I try to click on it again it does not close. How do I get it to open / close on click?

Australian Scaffolds | Scaffolding For Sale & Hire | Call 1300 919 905

Thank you

[Prasant]

Hello @aiad_development,

Thanks for writing in!

Essentially you are trying to remove link from Parent menu item. My suggestion would be to create a custom Top link under Appearance > Menus and then add sub menu under the menu item.

1. Under Appearance > Menu, add Custom Links menu item and in URL box add # and click add to menu.
   
2. Under Parent menu, add the necessary sub menu items.

Here’s a screencast that you can take a look to get started. https://cloudup.com/cvu7bcNjMsy

Thanks.