Where can I style the color of the active link in the nav bar on Webflow?
TL;DR
- On each page, select the navbar link that points to that page to access its Webflow-assigned "Current" state.
- Style the "Current" state to customize active link appearance, which will apply only when the link matches the active page.
To style the color of the active link in the navigation bar on Webflow, use the "Current" class state that Webflow automatically applies to links pointing to the current page.
1. Select the Active Link While on Its Page
- Navigate to the actual page that the navbar link is connected to.
- In the Webflow Designer, select the nav link that points to the current page.
- Webflow will automatically apply a special class state called Current to that link.
2. Style the "Current" Class State
- With the active link selected, look for the Class/Selector panel at the top (it will show something like
Nav LinkandCurrent). - Apply your desired styles (e.g., text color, background color) to the "Current" state. These changes will only apply when the link is active.
3. Keep the Base Style Consistent
- You can still edit the base
Nav Linkclass (without the Current state selected) to maintain consistency across all nav links.
4. Repeat for Other Pages (Optional)
- If your navbar is a symbol (i.e., reused across pages), styling the “Current” state on one page will reflect across all.
- However, if the nav links are different elements per page, you'll need to repeat the steps on each page.
Summary
To style the active navbar link in Webflow, go to the link’s destination page, select the link (which will have a Current state), and apply your style changes. This targets only the active page’s link without affecting the others.
