Where can I style the color of the active link in the nav bar on Webflow?
TL;DR
- Go to the page the nav link targets, select the link showing the “Current” state, and style it via the Style panel.
- Repeat for each nav link on its respective page, or use a shared class for consistent styling across all active links.
To style the active link color in a Webflow navbar, you’ll need to target the special “Current” state of a nav link that points to the active page.
1. Select the Link on the Current Page
- Go to the page where the nav link naturally points (e.g., “Home” for the Home nav link).
- Click on the navbar link for that page.
- When selected, you’ll see the “Current” state appear next to the class name at the top of the Style panel.
2. Style the Link in its “Current” State
- With the active nav link selected and “Current” showing:
- Open the Style panel.
- Set the Text Color, Background Color, Underline, or any other styles you want.
- This styling will only apply when that link is the active/current page.
3. Confirm Styling Across Pages
- Repeat the process for each nav link on its corresponding page (e.g., go to “About” and style the active state of the About link).
- Alternatively, use the same class for all navbar links. Once you style the “Current” version on one, the others will inherit it when they become active.
4. Avoid Styling Errors
- Don't try to simulate the “Current” state from the homepage or a page not linked by the nav item—it only appears when the link’s href matches the current page.
Summary
To change the active link color in Webflow, go to the page the link targets, select the navbar link while it's in the “Current” state, then style it. This ensures the color appears only when the link is active on its corresponding page.