Change Logo on Site Identity when scroll down

Hi there folks.

I’m trying to change the color from the logo (change the png file) on the scroll, where the navbar (header) gets sticky and changes his own color.
I already set the correct color changes from the bar. But I need to change the png file for the logo on the scroll. Is it possible?

Imagine the navbar (header) is WHITE and Logo PNG is FULLCOLOR.
On scroll, it changes navbar to BLUE and Logo PNG changes to WHITE.

I guess it’s just a png change that I need to make.
Or a color overlay, maybe?

Thanks for your ever help!


Can you please provide a link to your website?

Kind Regards, Roman.



Hello, thank you for the link.

Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section. img.custom-logo {
    filter: brightness(10);
    transition-duration: 0.5s;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you Roman,
It worked nicely.
I leaved aside the transition-duration.

Thanks for the help.


You are welcome!

By the way, transition-duration was there to make transition from white to colored logo smooth.

Kind Regards, Roman.