How to change the sticky logo on Scroll

Here's how to easily change your logo on scroll when your header is sticky.

The approach involves layering two logos: the primary logo is visible initially, while the secondary logo is hidden (opacity set to 0). As you scroll, the first logo fades out, and the second one smoothly appears. This creates a seamless transition.

Live demo:

Setting Up the Structure

Start with a wrapper link element (or a Div, but I assume that you want the logo to be clickable), and add two images of identical dimensions within this wrapper.

For each image, assign a unique ID. For instance, the first image (intended as the default logo) has the ID "logowhite".

For the second image, give it a different ID, for example "logoblack":

Make sure the second image remains selected. Set its position to absolute, so it overlaps the first one. Then, set its opacity to 0 to initially hide it:

The magic CSS

Select your Header Builder element and add this custom CSS:

At this point, the initial image becomes hidden (opacity:0), and the subsequent image becomes visible (opacity:1). The transition uses the same duration as the sticky transition, a CSS variable.

Since there is no option to change the speed of that transition in the header builder element, we can do it manually, so both, the sticky animation and the logos transition will have the same speed.

Use this CSS if you want to set your transition duration:

Extra CSS

You can use the same method to modify other elements, such as the menu links: