Nav links change color on scroll

Design help General
1

Hello Webflow community,
I need some help figuring out the following issue I am having on my portfolio site.

I have a fixed Navbar at top of page and when the page scrolls down the nav links change color to blue when triggered by the sections to which they are linked. I did not choose this blue, and its not in my site palette, so it looks out of place. It seems to be a Webflow standard link color.

I cannot figure out for the life of me how to edit this focused color state. I changed all of my custom link class states to a custom color, and it didn’t make a difference. As well as the “all links” class focused states.

Ive seen other forum posts of people having this same issue, and tried some solutions recommended there. One that seemed to work at first (but then failed) was adding the below custom code to the heading of the page.

*:focus a { color: #FFFFFF; } a { text-decoration: none; }

Any help here is greatly appreciated! Im sure Im missing something.

My read only link is below. The issue is in the main nav, when you scroll to each anchored section the nav items (Work, About, Services, and Contact) Change to a “Webflow-link-blue”. I want to edit this color to something in my palette.

https://preview.webflow.com/preview/previs-design-dd39cfcd71fe79cf13a925876?utm_medium=preview_link&utm_source=designer&utm_content=previs-design-dd39cfcd71fe79cf13a925876&preview=79869b495c7a85e179ff18da9fbb86ad&workflow=preview

Thanks.

2

Hi Luke,

It’s not obvious where the blue is coming from, and you have not published your site to staging, so I cannot see the CSS.

However you can easily override it, just select one while it is showing as blue, and in styles set that Current item to the color you want.

image
image946Ă—571 138 KB

3

Thank you so much Michael! You are a lifesaver that worked perfectly.

Im new to everything webflow btw. What does it mean to “publish my site to staging”? And how do I do that?

Really appreciate the quick help on this.

1 Like
4

Staging is the webflow.io version of the site that you publish, especially before you have assigned a custom domain. It’s under the top right publish button.

Very important for testing your site while you’re designing it.