Streaming live at 10am (PST)

Highlighting Parent Dropdown on "Current"

Hello all, I’ve been searching through all of webflow forums to find a solution to this, but I can’t seem to figure out how to get it to work, and those posts have been closed, so I am starting a new one, looking for some help.

My client wants to be able to highlight the parent navigation of the drop down menu. I’ve created a sample here:

When visiting pages “Page 1, 2, & 3”, he wants the text “PARENT” to highlight, so they know which sub menu they’re under, because there are several sub-menus on the navigation.

I found this, but I could not get it to work on my site.

Can anyone help me out with a solution?

That’s because Webflow is now using jQuery 3.

Here’s the new code:

$('.w-dropdown').each(function() {
  var hasActiveLink = $(this).find('.w--current').length > 0;
  $(this).find('.w-dropdown-toggle').addBack().toggleClass('dropdown-active', hasActiveLink);

Also, you are using the ID field, when you should be using the class instead.

1 Like

Ooo ok cool! So I’m a javascript noob, even though I’ve been trying to learn via videos/online lessons.

So I assume I need to use a class of “dropdown-active”… but I’m still confused as to what needs to be named that.

And the ideal place to put the code?

Thank you so much for your help!

Site Footer Code found in the site settings.

Add a class to the dropdown component, style it the way when you want it to look like when a sub-item is active.

Remove the class when you’re done.

1 Like

you are an angel. thank you so much!!!