Streaming live at 10am (PST)

Trouble incorporating text color change into nav bar

Hi all!

I know this has been addressed previously, but I’m still having trouble with it.

I’m a very new beginner to Webflow and using custom code, and I’m trying to have the text color change depending on its background using this code that was previously shared:

.nav-bar-main {mix-blend-mode: difference;}

Right now, I’ve named my nav bar “nav-bar-main” and have tried inserting this code into the page’s custom code before the < /body> tag. I’m not sure what I’m doing wrong, especially with something that seems so straightforward and simple. If anyone could take a look at my set-up, I would greatly appreciate it!

Thank you!


Here is my site Read-Only: LINK

Hello @Shelley_Tsui, you got the right code but it is on the wrong place. So what you have to do is delete the code from the page settings, on your page body add an embed element, on the embed element console copy the code that you already have(the code that is on the before /body section) and click save and close and it should work for you. Let me know if you have any questions.

post deleted by me as wasn’t accepted as relevant response and solution.

Hi Pablo! Thank you for your reply, I think I put it in the correct place after reading your suggestion but it’s still not working. Would you be able to check again and see if I did it correctly?

HI @Shelley_Tsui as I see that you are not interested I just delete it. Sorry to jump in trying to help and give you solution.

Hey @Shelley_Tsui and @Stan, yes so Stan was right you can’t see the difference even though the code is working because when using the text color that you have the change is minimal. Sheylley, the way you have it now is working, however, I will suggest you to change your nav bar text to white to really see the blend mode working properly.

Thanks for you video @Stan, I didn’t realize all the calculations that go into the blend modes property.

1 Like

Thank you for your help, Stan!

Ah, I see. That is something I will have to keep in mind for the future. Thank you for your help, Pablo!

1 Like