I need the nav bar background color changed to white (instead of blue), and the text links changed to black (instead of white), when someone scrolls down the page, right after passing the blue hero section. That’s when I want the change to take place.
Hi @eze81, thanks for your question and post. At the moment, you cannot dynamically change the background color or link color using interactions alone, but with a little jQuery pasted into the site’s Footer section, you can accomplish this. Here is some code that you can try out to see if it helps. Paste the following jQuery code into your Custom Code section of Site Settings, in the Footer section:
.anchor-point is the class for the element on your page, what when the scroll reaches that point, the jquery function to change the css style for your navbar background color and navlinks will change.
.navbar is the class name of your navbar
.navlink is the class name for your navlinks
One can use the jQuery css function to update css styles programatically. In the future, we will have more robust support for complex interactions and css changes.
Hopefully that helps to guide you in a direction to go in. Let me know if you have any questions.