Streaming live at 10am (PST)

Text Color change for Nav Links


#1

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)


#2

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

@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.


#3

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?


#4

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.