How to highlight top level menu item when mega menu is open?

The mega menu works great, however, exactly how are we supposed to highlight the top-level nav item while its mega menu is open?

I did try to do this…

Hi! :slight_smile:

Good approach! Using MutationObservers for this example may be a good idea. The problem here is the timing! Because we also inject the menu with JavaScript, on your execution, the element for your mega menu is still undefined in the DOM. Exactly for such situations, in the next version, you will be able to add a small delay for your event listeners:

Then you will be able to use the variables in a custom JS action to add a class when the mega menu opens and remove it again when it closes:

And you’re done :slight_smile:

We plan to release the new version end of the next week. Can you wait until then? Otherwise I could create a small workaround for your website :slight_smile:

Hi @Daniele,

First, thanks for the response. I have been trying to use the new delay to do something very similar to what I originally showed you but have been unable to get it working.

In this new case, on a mobile-only menu, I am trying to add a class to the body tag when a button is mutated to include the class .is-active.

Here is my example page (use phone view in your browser): Brand Guide - Greenfig

Here I watch for the button which has the class .hamburger–spin. When the class .is-active is added then I want to add the class .mobile-menu-open to the body tag.

What am I doing wrong?

@Daniele - Bump.

Hoping to get a response since I need to finish this portion of the project to show to a client. :v:

Could you send me access to your site to take a look?

I don’t see a way to private message you here. Could you change the password after you log in, please?

-Edit by Daniele-
I’ll write you a DM :slight_smile:

Thanks, @Daniele. That was very helpful.

1 Like