How can I change the font color of the links in my Webflow Navbar when hovering over it and when hovering over the links directly?
TL;DR
- Use the Hover state in the Style panel to change link font color when hovering directly over each link.
- Create a hover interaction on the Navbar that changes the font color of all links simultaneously when the Navbar is hovered.
You want to customize the hover font color for your Webflow Navbar links in two scenarios: (1) when the user hovers over the entire Navbar, and (2) when the user hovers directly over a link.
To do this, you’ll need to apply custom hover styles using Webflow's Style panel and possibly custom interactions.
1. Change Font Color on Link Hover
- Select the Navbar link (usually a Link Block, Text Link, or Nav Link).
- In the Selector dropdown, choose the specific class applied to the link (or create one).
- Hover over the "States" dropdown (top right of Style panel) and select Hover.
- Set the Text Color to your desired hover color under Typography.
- Return to the None state to save the hover effect.
This will change the font color only when hovering directly over a link.
2. Change Font Color When Hovering Over the Entire Navbar
This requires a combo class and a hover interaction:
- Give your Navbar a unique class (e.g.,
main-navbar). - Give all Navbar links a shared class (e.g.,
nav-link). - Go to the Interactions panel, create a new Element Trigger for the
main-navbar. - Choose On Hover → Hover In.
- Add a "Style" animation and select all elements with class
nav-link. - Set the Text Color to your new hover color.
- Do the same for Hover Out, and restore the original color.
This changes all link colors at once when hovering over the Navbar area.
3. Additional Tips
- Ensure pointer events are not disabled on the navbar; otherwise, the hover won’t trigger.
- You can add a transition effect to the links for smooth color changes:
- Select the link class.
- Go to the Transitions section of the Style panel.
- Add a Color transition with a duration (e.g., 200ms).
Summary
To change link font colors:
- Use the Hover state on links for direct hover effects.
- Use a hover interaction on the Navbar element to change link colors when the entire Navbar is hovered.
This setup allows full control over how your links behave visually in your Webflow navigation.