How can I disable the hover effect when the state is on current in Webflow?

To disable the hover effect when a link or element is in the "Current" state in Webflow (commonly used for active nav links), you'll need to adjust style settings to override the hover state.

1. Identify the "Current" State Element

• Webflow automatically applies a Current state to a nav link when its href matches the current page.
• Select the nav link on the canvas or in the Navigator while viewing the page it links to. The class name will show "Current" in green next to it.

2. Modify the Hover Style

• Select the same element (e.g., nav link component).
• At the top of the Style panel, select Hover from the state dropdown.
• You'll now see the hover state styles. Make note of or remove any styles you’ve applied here (e.g., color changes, background effects).

3. Override Hover with “Current” Styles

• Return to the None state.
• While still selecting the same element, the class should now show "Current" highlighted.
• Apply the same styles to this Current state as the normal (None) state or different styles as desired.
• These will override the hover effect when the link is in the current state.

4. Reset Unwanted Hover Effects

• If any unwanted hover styles remain, go back to the Hover state and remove styles (click the blue style name and hit the trash icon).
• Webflow uses style inheritance, so clearing styles ensures that the Current state shows without hover effects.

5. Use Combo Classes if Needed

• If the hover effects still apply globally, you can create a combo class (e.g., “Nav Link Current”) and manually apply it to those special links—though the built-in Current state should usually be sufficient.

Summary

To disable the hover effect when an element is in the Current state, edit the element's Hover styles and ensure the Current state has overriding styles. Webflow automatically prioritizes the Current state, so adjusting it properly will prevent hover effects from showing on active links.