Nav Bar color and logo change when scrolling

Hi experts!

How can I accomplish this nav effect: When scrolling down the page the sticky nav changes the color and the logo (eg from white to black and a different logo), I have managed to change the color, but the logo I couldn’t). please see screenshot to give you a clear idea what I am looking for?

Hey there @Monica

I’m going to assume you’re using the Mega Menu stack since you didn’t say, and there’s not a link to your site. If that is the case, there is not an alternate logo setting when the Mega Menu navigation is “stuck” using the Sticky Navigation option.

@elixirgraphics, yes I am using the Mega Menu, well I just stick to color change only!
thanks Adam.

Not a problem. I’ll add this as something to look at as a possibility with a future update.


Check out Big White Ducks Chroma stack, it can do everything you request and more. There is a Foundry specific example but the others it isn’t just designed for Foundation.

1 Like

@jspencer, thank you! for sure I will check it out.

Chroma is not designed specifically for Foundation and actually works with everything. As is usually the case, Andrew at BWD has also created a Foundry demo for download. Very cool stack and useful stack.


@webdeersign, thank you, Gary, for sure I will check it!