Text Color change for Nav Links

[Belli]

Hi!

On my new site I defined a fixed Nav Bar that changes its BG and Text Color on page scroll, but I have 2 issues going on here:

1. If I don’t explicitly defined the Nav Link text color I can’t make it get its Nav Bar (parent) text color through CSS inheritance, why?

2. When I set the Nav Link text color on the page scroll interaction, the hover and current states does not work anymore. How can I fix this issue?

Thanks in advance!

---

Here is my site Read-Only: [LINK](https://preview.webflow.com/preview/bestcoffeeshop?preview=a47af0656401eebd79f3933ac0fa581f)
(how to share your site Read-Only link)

[vincent (Vincent Bidaux)]

@Belli

If I don’t explicitly defined the Nav Link text color I can’t make it get its Nav Bar (parent) text color through CSS inheritance, why?

Because Webflow defines a default color for the nav-link element, and that’s takes over anything defined on the parent.

http://vincent.polenordstudio.fr/snap/m6j9c.jpg

@samliew gave me the solution (thanks Sam). Use a custom code element in the page and put that inside it:

<style>
.w-nav-link{color:inherit!important;}
</style>

It’s going to cancel the color defined by default and force the inheritance from the parent.

[Belli]

Hi Vincent!

It worked just perfect, thanks!
I also added the code for the hover and current, but I could not make the current color happen for the nav link.

I added the following code to the style on the custom code:

.w-nav-link{color:inherit!important;}
.w-nav-link:hover{color:#ea7cff!important;}
.w-nav-link:w--current{color:#ea7cff!important;}

Do you know anything about that too?