Highlighting Parent Dropdown on "Current"

Design help Custom code
1

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: Webflow - SubNavTest

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?

2

That’s because Webflow is now using jQuery 3.

Here’s the new code:

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

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

1 Like
3

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!

4

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
5

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

6

Hi all!

I’m having issues putting this class to work… can someone help me?

preview public link

It should work in the Products and Technology dropdown