Change the logo on scroll in Divi

When you use a transparent background in the header (using the Divi theme) and when you scroll you want to have a light or dark background, it can cause some conflicts. But using this trick you have your solution. By watching this video you learn how you can add 2 separate logos to your header. One logo for the to header when you don’t scroll and one logo for when the visitor scrolls to your website. This is a game changer for me, and I hope also for you!
Credits for the piano music:
Sad Piano Music
Wayve
• Sad Piano Music - Sear...

[@michelegavassi]

Many, many thanks Ferdy!! I was said about it as well! Now I have it!! I am very thankful for your work here! xx from Brazil.

[@amyrolfsen826]

Thank you, Ferdy! This worked like a charm. I couldn't find your CSS on your site but copied it directly from the video.

[@helioalexandrino7]

Great video! I was searching for this days ago and didn't find a so simple and powerfull explanation like this! Tks a lot!

[@EmilPacurar]

Thanks!

[@philipgebhardt3453]

The 'content' css declaration doesn't work in firefox or IE so this solution doesn't work in all browsers i'm afraid....

[@YamaTusandaMatrang]

Just what I was looking for! Thanks Ferdy!

[@marcinjedrych7836]

Man, you are reliable! Thanks!

[@rsseguel]

How can I animate the logo to make that scale when you scroll down but using Elementor? Is possible?

[@AicxMedina]

How to do that on a custom header? And change the logo when the screen size is for a mobile device

[@Suvro-rp9wb]

this the best video.

[@webexpertpro2683]

awsome solution

[@thimodiener78]

Great job! But how about the nav-bar?

[@impactindia6268]

Thank you so much... Once it's done in my website... Will update you with another Thank You Note.. ☺️

[@darndarn99]

Hi, is this still the best way to do this in 2024 ?

[@alimahmudul1320]

Thanks Ferdy

[@estherv1287]

Hi Ferdy, top video! Dank voor de duidelijke uitleg. Vraagje: hoe kun je ervoor zorgen dat het logo direct veranderd als je naar beneden scrollt. Nu blijft (bij mij althans) het 1e logo een tijdje in beeld. Bedankt!

[@surajpillai2648]

Thanks all your video's are very helpful. Can you pls show how to create login portal on website .

[@helioalexandrino7]

That would be great!

[@ShahariareRahman]

it is not working in firefox browser.

[@Axoervm]

Thanks for helping us.

[@zohaibfarooq6613]

thanks very helpful video

[@devapps-uk]

Works in chrome, not in Firefox, Safari.

[@kisetargilop]

this is not working on firefox :(

[@marufkarimov9942]

how can I use it in elementor?

[@opeppel]

Thank you! This works great on the desktop. Is there a way to make it work on mobile also?

[@douglasopan]

I Think you need to enable the sticky header on mobile

[@douglasopan]

Thank you!

[@intech7863]

Funny start a like that 😃

[@ОтецФёдоръ]

First)