Cannot get Nav Bar text to change text color on scroll interaction

New to Webflow (other than the 12 hrs a day for 2-3 weeks I’ve spent on this site) but 20+ years doing web design. I’ve set an interaction on the NavBar so that the BG color changes on page scroll from transparent to black, but I cannot seem to make the NavBar text color change to white as black BG appears. Have tried a million things to no avail. Thanks for any advice.

(Not sure why, but the preview does NOT show the navbar BG interaction of trans to black?


Here is my public share link: Webflow - Valley View Farms
[1]: http://
[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link

Instead of selecting the parent element NavBarBreatix, try changing the target to the actual link class “Regular_link 4” and duplicate it for the links with dropdown, in this case “Dropdown-toggle 4”. Please note to select as Class not a Selected Element. This should fix the problem. Please see sample image for reference.

1 Like

OOOH! Thank you! I got it to work. I love Webflow!

However, I realize I did select the element, not a class (and it worked). Can you explain why I should be using a class? Thanks. Going to go look for some videos on this.

Select element only targets specific element you have selected, whereas the class - all elements with that class name will be affected. In this case, it should work both because you have selected the element. Class best works if you have an interaction that you wanted to take effect for all the same elements. Example, you might have 10 different cards with a class name of “info-cards” and you wanted to have the background to change color upon scroll. So instead of creating each card a different interaction, you can just create one interaction and use its class name “info-cards”. I hope that make sense.

1 Like

Yes, it does make sense. Thank you.

1 Like

Uh oh. I was looking at my “published” site last night on my iPad and I realized that the links on the mobile menu all turn white as I scroll down (As set in the Interaction we were discussing yesterday). I’m not seeing where the settings for specifically the mobile menu would be… It has an all white background and I don’t want it to changing at all on mobile… just the links in the nav bar header… Does that make sense?

I guess what I asking is how do I target only the mobile menus? Thank you.


https://preview.webflow.com/preview/valley-view-farms?utm_medium=preview_link&utm_source=designer&utm_content=valley-view-farms&preview=f81e73e173252e159874f6ede51ea058&locale=en&workflow=preview

You can make the interaction to trigger only for desktop and disable for tab and mobile by unchecking it. Same applies if you have interaction for tab/mobile and you don’t want to apply it on desktop.

1 Like

Oh duh. I was overthinking it. Thank you.

1 Like