Streaming live at 10am (PST)

Current class on on the actual dropdown toggle button in navbar?

Hi

Not sure if it’s possible or I’m doing something wrong, but here it goes: When I use a dropdown in the navbar, is there a way to set a “current style” on the dropdown button itself, not just on the selected buttons in the dropdown list? When used in the navbar, after the user have clicked on a button in the dropdown list and the list is closed, it would be great if the dropdown button could indicate that “a-button-in-this-dropdown-list-is-selected”

BR
Christoffer

You have to use custom code for this. Paste in Site Footer Code, then add the class dropdown-active to your dropdown and style this class.

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

http://sandbox-903b9c.webflow.io/current-class-on-dropdown-containing-current-link

https://preview.webflow.com/preview/sandbox-903b9c?preview=2a77d4d5446ddad097abb9bf8603288b


Also, feel free to contact me for further code help and/or customization of third-party plugins

4 Likes

Thanks for your reply @samliew, I’m not in the office next week, but will try this as soon as I’m back :+1:

BR
Christoffer

Hi again @samliew

So, I have added your code to the custom code area… and it flip’in worked! :smiley: Thanks for your time!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.