Current class on the actual dropdown toggle - revisited

Design help General
2

I had some problems with the initial script and had a friend updated it a bit:

<!-- Navbar Dropdown selected -->
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('.w-dropdown').each(function() {
    var hasActiveLink = $(this).find('.w--current').length > 0;
    if (hasActiveLink)
    {
	$(this).find('.w-dropdown-toggle').addClass('dropdown-active');
    }
  });
});
</script>

Add the script above to custom code. Then make a class on the dropdown toggle element used in the nav bar that is named ‘dropdown-active’ and style it to look like a the ‘current nav link’. Then remove the class (but do not delete it). Mave a new class on the dropdown toggle element that looks like a normal nav link. The script above will automatically replace the ‘dropdown’ class with ‘dropdown-active’ class when a nav link inside the dropdown is selected. Hope this helps :slight_smile:

1 Like