How to change text color on symbol

Hi guys
Have been trying to change the text color of HOME navigation bar that is a symbol, without changing the color of the text on other pages (About Us, Contact Us est…)
Have been trying to figure out that myself, but so far, I have been unsuccessful.
Any help would be greatly appreciated.

Here is my site Read-Only: [LINK][1]
https://preview.webflow.com/preview/24-west-sussex-solar-service?utm_medium=preview_link&utm_source=designer&utm_content=24-west-sussex-solar-service&preview=3006f9954a1a92cb50b97762034f17e7&workflow=preview

Currently, the best method for selective style changes within a Symbol is via custom code. You can either add it within the Page Settings (changes are only shown on the published site — not within the designer) or you can add it within an Embed element somewhere on the page itself.

The code below should work, just keep in mind it automatically applies to only the first navigation link in the list:

<style>
.nav_link:first-child { color: #YOURCOLORHEX; }
</style>

If you plan on moving that link to a different position, then you’ll want to apply a combo-class to the “Home” link and then you can target that specifically:

<style>
.nav_link.your-combo-class { color: #YOURCOLORHEX; }
</style>

That said, if you’re looking to change the text color on links for “active” pages (to help visibly reflect which page you’re on) that’s a much easier process. Webflow automatically applies a “current” state on links that share the URL of the page you’re on, so all you need to do is style the class when it shows a green “current” style within the Selector field:

image

You’ll only need to make this change once and it will apply to all of your links as long as they share the same class name (in your case, nav_link).

Hopefully that helps, but don’t hesitate to reach out if you have any other questions :+1:

1 Like