How can I change the visited link color in the navbar using Webflow?
TL;DR
- Assign a shared class (e.g., navbar-link) to all navbar links.
- Add custom CSS with the :visited pseudo-class in the head section via Page or Project Settings, then publish the site to see the effect.
To change the visited link color in the navbar in Webflow, you need to target the :visited state of the link class. Webflow's built-in Designer only supports limited pseudo-class styling, so a workaround using custom CSS is required.
1. Create a Unique Class for Navbar Links
- Select each link in your navbar and assign them a common class, like
navbar-link. - This ensures all links share the same styling and can be targeted consistently.
2. Add Custom CSS in Page Settings or Site Settings
- Go to Page Settings (if it's for one page) or Project Settings > Custom Code (for the entire site).
- Paste this code into the Inside
<head>tag section:
`<style>
.navbar-link:visited {
color: #yourColorCode !important;
}
</style>`
- Replace
#yourColorCodewith the desired hex value (e.g.,#888888for grey).
3. Publish Your Site to Preview
- Custom CSS doesn't render in Webflow's Designer, so you'll need to publish your site to see the visited state in action.
- Make sure to visit a navbar link, then go back to the original page to see the visited style take effect.
Summary
To change visited link colors in your navbar, assign a shared class and use custom CSS with the :visited pseudo-class. Add it in the page’s or site’s <head> section and publish your site to preview the effect.