Where can I style the color of the active link in the nav bar on Webflow?
TL;DR
- Navigate to the linked page, select the nav link with the “Current” state, and style it to change the active link’s appearance.
- The “Current” state is applied automatically and only affects the active page, leaving the base class styling intact for other links.
To style the color of the active link in your Webflow navbar, you need to target the built-in “Current” class applied to links pointing to the current page.
1. Select the Nav Link on the Current Page
- Navigate to a page that the nav bar link points to. Webflow adds a special “Current” state to links whose URL matches the page you're viewing.
- Click on the link in the nav bar. You’ll see a green label next to the class indicating it’s in the Current state.
2. Style the “Current” State
- With the link selected and labeled “Current”, update any styles (e.g., text color, background color, font weight).
- These styles apply only when the nav link is active (i.e., matches the current page).
3. Do Not Remove the “Current” State
- You can’t manually apply the Current state—it only appears automatically when the link matches the active page.
- If you're testing or designing this, you must preview or edit the page it links to in order to access the Current state for that link.
4. Shared Class vs. Current Styling
- Styling for “Current” only overrides the base nav link class on active pages.
- You can still style the normal base class separately for default (non-active) links.
Summary
To change the active nav link color, navigate to the linked page, select the nav link with the "Current" state, and apply your desired styling. This ensures the color change only applies when that link is active.