Streaming live at 10am (PST)

Highlighting Parent Dropdown on "Current"


#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: https://preview.webflow.com/preview/subnavtest?utm_source=subnavtest&preview=964fd592d13a1d33f2977a74a9ddd6c6

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.


#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!


Persistent navigation link highlighting for current section
#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.


#5

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