Webflow sync, pageviews & more.
NEW

How can I change the color of the visited page link in the navmenu on my Webflow site?

TL;DR
  • In Webflow, select your nav link, assign a common class (e.g., nav-link), then choose the Visited state from the selector dropdown.
  • Set the desired text color, switch back to the None state, and publish your site to apply and test the visited link styling.

To change the color of a visited link in your Webflow site’s nav menu, you’ll adjust the style for the :visited pseudo-state on the specific nav link classes.

  • In the Webflow Designer, navigate to your Navbar component.
  • Click on one of the nav menu links—ensure it's a Link Block or Text Link.
  • If you're using classes for links (recommended), make sure all your nav links share a common class, like nav-link.

2. Add a Class (If Not Already Present)

  • With the link selected, check the Selector field in the top right.
  • If no class exists, click + and add a class like nav-link.

3. Open the Visited State

  • With the nav-link element selected, click the States dropdown (next to the class selector).
  • Choose Visited from the list. This changes the style for the :visited state.

4. Change the Text Color

  • With the Visited state active, go to the Typography section in the Style panel.
  • Adjust the Text Color to the desired visited color.

5. Reset to None or All States

  • After making changes, switch back to the None state in the selector dropdown to continue editing normally.

6. Publish and Test

  • Publish your site to test the visited link effect.
  • Note that the :visited state applies only to links that have already been visited in that browser session.

Important Limitation:
Web browsers limit styling on :visited links because of privacy concerns (e.g., disallowing background images or different layouts). You can still change text color reliably.

Summary

To change the visited nav link color in Webflow, create or select a link class, choose the Visited state from the selector dropdown, and set a new text color. Publish your site to see the effect during live browsing.

Rate this answer

Other Webflow Questions