Nav change colour depending on slide underneath

Design help Animations & Interactions
1

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.

Thanks,
A

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

2

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
3

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

4

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’ ) {
$(‘.brand’).addClass(‘now–white’);
$(‘.navbar1_link.black’).addClass(‘now–white’);
}

But instead of “direction down”, I would need something else, like if “slide.is-dark” 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.

Thanks

Here is a link to read-only:
https://preview.webflow.com/preview/ashley-kirk-design-2023?utm_medium=preview_link&utm_source=designer&utm_content=ashley-kirk-design-2023&preview=6e19e9bd87ecddd2d30137c0f2fcbe01&workflow=preview

5

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.