Nav change colour depending on slide underneath

Wondering if anyone can point me in the right direction. I would like to have a top nav change to either light or dark, depending on the image underneath which is in a slider. So, if the slide image is dark, the nav would change to white. If the slide image is light, the nav would change to dark.


Here is my public share link: LINK
(how to access public share link)

Typically the nav and the slider won’t be nested within each other, which can make it difficult to use CSS selectors here. I’d go with a JS approach.

Let’s say your default display is “light” mode nav.
Create your light mode nav, and then create a variation of it where every relevant element has a subclass of is-dark, and style that variant accordingly.

Similarly, give your dark slides a subclass of e.g. is-dark to identify them.

Use SA5’s slider to easily get the slide changed events, no matter whether it’s user-changed or auto-changed.

Then in the slideChanged event, you’d just check the current slide’s class list for is-dark, and update your relevant nav elements accordingly by adding/removing that is-dark subclass.

1 Like

Thank you so much! I’ll give it a try.

Hi Michael,

Thanks again for your suggestions. I used the sygnal slider element and I got some of it to work. Currently the console is showing the slides are changing. My issue now is I’m not sure how to identify a dark or light slide, and then how do I communicate that to the nav.

My thought is, since I’m also using Waypoint.js for my nav colour change, I wonder if I can use some of that code to change the nav to light or dark.

For example, I would like to re-use this code:
if (direction == ‘down’ ) {

But instead of “direction down”, I would need something else, like if “” then do the thing.

I’m not sure where to put the .is-dark or .is-light class. I tried adding it to the slide element.

Any help is appreciated.


Here is a link to read-only:

Another issue I just thought of, once this is working, my nav will probably change colours even when the slider is out of the viewport, which is not what I want. I will need to think about this.