How can I change the color of the visited page link in the navmenu on my Webflow site?
TL;DR
- Go to each page, select the corresponding nav link to trigger its "Current" state, and apply your desired color in the Style panel.
- Repeat this for all pages to style each nav link individually while avoiding browser-limited
:visitedstyling.
To change the color of a visited page link in your navmenu on Webflow, you’ll need to style the Current state of the link, which appears only when the link points to the page you're on.
1. Select the Nav Link on the Current Page
- Go to the page that matches one of your navmenu links.
- In Designer, click the link in the navmenu that points to that same page.
- Webflow will automatically assign this link a Current class state (shown in blue in the selector label).
- This state only appears when the link matches the current page.
2. Apply Styling to the Current State
- In the Style panel, confirm you're styling the Current state (it should say something like "Nav Link - Current").
- Change the color property (text color) to whatever you want for the visited/active page link.
- You can also apply other styles (e.g., underline, background, etc.) if desired.
3. Repeat for Each Unique Nav Link
- Visit other pages of your site and repeat this process for each navmenu link that corresponds to a different page.
- Each one will show the Current state only on its respective page.
4. Avoid Global Visited Link Styling
- The traditional CSS
:visitedpseudo-class does not allow styling most properties (like background or font style) due to browser privacy restrictions, and Webflow does not expose this pseudo-class in the Designer. - Use the
Currentstate method instead for full control over active/visited nav links.
Summary
To change the color of a visited navmenu link in Webflow, style the “Current” state of each nav link by visiting its corresponding page in the Designer and applying the desired color change. This ensures only the active page link is visually differentiated.