Back to all Elements

Current Class on Dropdown

Makes the dropdown element (usually inside navigations) indicate when a current state is active on one of the pages within.

What this code does is to check if there's a child element under the dropdown with current state ('.w--current' class added by webflow), and apply the same class to the parent dropdown element.

We start by adding this short code to the Project's custom code section, so this will work globally on any page in the project.. We can also add this manually to every page we have a sub level dropdown menu.

<script>

 $('.w-dropdown').each(function() {

   var hasActiveLink = $(this).find('.w--current').length > 0;

   $(this).find('.w-dropdown-toggle').addBack().toggleClass('w--current', hasActiveLink);

 });

</script>

Copy

Based on Samuel Liew code from here.

Preview:

When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.

Might also interest you:

Hover to reveal Mask

Cloneable
Code
Design

A fixed background image that is revealed by mouse hover all over the section

Read more

Auto Change Tabs 2.0

Cloneable
Code
Interactions

A new and improved version for a Tabs element that automatically change tabs

Read more

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more