Close Mega Menu when a link inside it is clicked

How To
1

Hello - I’ve used the “Nav Element + Template” way to make a Mega Menu in Bricks, and it’s working really well, except that I’d like the dropdown menu to close once a link inside is clicked. It’s (obviously) quite large, and you can’t always see the new content being loaded behind it if it stays open after the link is clicked. This is particularly true when the links are for different anchors on the same page and are just scrolling around and not loading new pages.

See my work in progress site here: https://brown-spider-821637.hostingersite.com
The “Services” nav item has a working Mega Menu dropdown with links that are active for testing.

I’ve tried using AI to generate me some Javascript, but the problem seems to be that the menu is triggered on HOVER, and I’d like to close it on a (link)CLICK action. I don’t want to use the “click to show” option for the Mega Menu (which could fix the above), because we’ve seen a lot of users not clicking on nav items even when they have carats, and so they never see the dropdown content and links.

Any help appreciated.

Mac OS, Chrome and Safari.

2

As far as i can see the active section is classed as .brx-has-megamenu.open

Getting rid of the .open class within the scroll call should do the job.

1 Like
4

Thanks for the suggestion! I’ve implemented that now, and if you look at the site again and try to use the links in the mega menu on the “Services” page itself, you’ll see that now the menu closes, but opens up again when the scroll behaviour is done.

The menu is set to open on hover. It seems that even if you remove the .open class with JavaScript, Bricks’ own script sees your mouse is still hovering over the area and immediately adds the class back.

It would be great if there was a little “close menu on link click” checkbox for the settings of this feature :sweat_smile: