How can I disable the hover effect when the state is on current in Webflow?
TL;DR
- Select the navigation link in its “Current” state, access its hover style, and remove or reset any hover effects to disable hover behavior.
- Ensure hover styles remain applied to non-active links, and use a combo class if further style control for the current link is needed.
To disable a hover effect when a link or element is in the "Current" state in Webflow (typically for navigation links), you'll need to adjust the hover style so it’s conditional on not being active.
1. Understand the “Current” State in Webflow
- Webflow automatically applies the “Current” class state to any link pointing to the page you're currently on.
- The “Current” state overrides normal and hover styling unless explicitly redefined.
2. Select the Right Element
- Click your navigation link that corresponds to the current page.
- It will show the “Current” label next to the class name in the Selector field.
3. Reset or Remove the Hover Styles for “Current” State
- While the element is in the “Current” state, click into the Hover style in the Style panel.
- Any properties you set here will apply when the user hovers over the active/current item.
- Delete or reset any hover styles (like color changes, underline, opacity shifts) added here to effectively disable hover effects on the current page link.
- Confirm that no transition animations apply indirectly to the hover state while in the current state.
4. Make Sure Other Links Retain Their Hover State
- Select a navigation link that is not currently active.
- Style the hover state normally (e.g., color change on hover).
- These changes will apply to all items sharing the same class, except the “Current” one, which has its own modified hover behavior.
5. Optional: Use Combo Classes if Needed
- If more control is needed, you can create a combo class (like Nav Link + Active) and customize the styles specifically for that version.
- Just be aware this may require maintaining two slightly different versions of the same base style.
Summary
To disable the hover effect on a “Current” state element in Webflow, select it while in the current state view, access the hover style, and remove or reset any hover interactions. This ensures active links don't animate or change appearance when hovered.
