Streaming live at 10am (PST)

How Do I Change the navigation link colors with scroll?

Hi there!

I’ve recently cloned a template and t’s going great so far only I can’t figure out how to change the color of the navigation links. Even if I change the color in designer in view mode it automatically goes back to white and then to black while scrolling while I’ve set it to blue. Could someone help me out? Thank you so much already in advance.
This is my site read link https://preview.webflow.com/preview/esmeraldas-dynamite-project?utm_medium=preview_link&utm_source=designer&utm_content=esmeraldas-dynamite-project&preview=646d5a11fbb68c8679a99a8e32d8c8e0&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I see the links blue and they stay blue.

That’s so weird! I’ve published the site just to see it and it’s white! Do you see it differently? https://esmeraldas-dynamite-project.webflow.io
Thank you

Found it.

The Hero Section element has an interaction set to it, and one action in that IX is change color of nav links to white when element is in view and to black when leaving the view…

Use this trick to quickly list all the element in a page in order to spot the ones having an IX trigger tied to them:

1 Like

Thank you so so much! Would’ve never figured that out.
I have 2 more questions if that’s okay with you!
When I downsize the site for I have this extra white space on the side that doesn’t go away starting from like 1174 px in desktop mode. I find it weird as on the mobile phone mode this doesn’t happen. Would you know why that is and how I can fix it?

And the second second question is that if you scroll through the site at the our services section there is this progress bar that is set at different percentages and I’d really want to know how I can change the percentages. (I want to make them all 100%)

Sorry if these are silly questions, truly a beginner here.

Thank you so so much!

  1. The white space is overflow from the client logo section. Quick solution: I would just make the Client Logo class 16% width (because there are 6 logos, you might want to adjust this if there will be more or fewer logos). Or you could use a fixed pixel width or wrap the logos. Or put them in a grid.

  2. There is an interaction on the bars in the Bar Progress div. If you open the interaction you can adjust percentages there.

1 Like

The clue is when you inspect your nav link element with Chrome inspector on the published site, when it’s white. You can see the color you gave it (blue) in the css for its class, but you can see it’s strikedout, and upper, you can see that another color is given to it, the white, and overiding the blue. And you can see that it’s set on “element style”, meaning it’s not in the css, it’s in the html. Look back at the element declaration in the code and you can see that a color is added.

So a color is added on the fly, on the html element, that’s the clue that says “This color is probably added by code, by Javascript, by an Interaction.” That’s when the search for an interaction trigger begins. You check the Page interactions first because they are listed all the time, Whatever the element selected. You find one but there’s nothing in it changing the color of the links. So then you have to find an element with an IX. In the Navigator view, elements with an IX trigger have a little flash icon in front of them. By using the tip I’ve linked to, you can quickly scroll in the tree view and check elements with a flash: select them and go inspect their attached Interaction… and finaly you find the culprit.

It always the same logic. I reckon it takes a bit of learning but don’t be afraid of it, what I described happens often and is solved the same way each time.

The forum is made for that :slight_smile: Your issue is turned into a solution for others.

Ah I see! Thank you for explaining it!

Thank you so much! I removed the client logo section entirely as I wont be needing it but the issue still persist but now only in landscape mode do you know what it would be?

And I’ve seen the interaction on the progress bar but I can’t seem to figure out where I can change the percentage do you perhaps have a screen shot of this?

Thank you so so much!

The overflow is coming from the Quote slider.

See below for progress bar. Arrows pointing to the most relevant bits.

1 Like