Making the dropdown menu behave

[Pilate]

I’m trying to use the navigation collapsed widget to build a site navigation. I’d like the submenus of any main heading to collapse back up when a different main heading is clicked and those submenus are revealed. Is there some code that will take care of this?

[ruenel]

Hello James,

Thanks for writing in!

To resolve your issue, please edit your custom header and add this custom JS code:

jQuery(document).ready(function($){
$('.x-menu .menu-item-has-children .x-anchor').each(function(){
    $(this).on("click", function(event) {
        if ($(event.target).attr('class') != "x-active") {
            $(this).parent('.menu-item-has-children').siblings('.menu-item-has-children').find('.x-active').trigger('click');
            }
        });
    });
});

We would love to know if this has worked for you. Thank you.

[Pilate]

OK thanks! I tried it and it didn’t make any difference. Here’s a quick vid. I’ll attache a secure note if you can make use of it.

OOps! Sorry I see it’s a JS code ( I’ve really no idea of the difference). Let me try again.

Well … shoot. It still didn’t take. Here’s another vid

https://cl.ly/d9e8d902fb55/Screen%20Recording%202019-08-11%20at%2003.25%20PM.mov

[ruenel]

Hello James,

The code actually works. You just have to test it on the live site and not within the preview because while you are in the header builder, custom JS code will not run or will function limitedly.

Please let us know how it goes.

[Pilate]

Great! It’s working. I appreciate the help. I’d add however that such bits of expertise would be better shared via tutorials. I think a good number of small short vids that answered distinct questions accurately titled for easy searching would be a great improvement. Also, a dedicated area for customers to access learn such things that obstruct progress.

[ruenel]

Hey james,

It’s good to know that it works our for you.
By the way, your feedback has been noted. Will do.

Regards.