Today we are going to show you how a step by step guide on how to change your Divi logo on scroll, when your fixed header kicks in the logo will change to another. This method works on all browsers but requires more manual work.
There are many ways to do this, for example, using CSS, but this does not work on all browsers so what do you do? Carry on reading to find out a bulletproof method.
You can watch the video below or carry on reading.
1) Create a child theme
The first thing to do is to create a child theme so we can make some changes to our header.php file. You can download our child theme that has all the modifications at the end of this post or you can create one yourself using our guide here.
The main thing you need to do here is to copy the header.php file from the Divi theme and paste it in your child theme. Once you have done this your theme structure should look like:
2) Modify your header.php file
Now you have this, find in your header.php file the class name “logo_container” – this is where you logo is housed. Copy the image tag and add a class to the both to differentiate between the logos. I added “main-logo” and “fixed-logo” so I can use some CSS to hide. Furthermore I changed the id of my fixed logo to be “fixed-logo” as it is best practise to not have multiple ID’s with the same names. Below is how the code will look when you are done.
As you can see I duplicated the image tag, added classes and changed one of the ID’s. I also changed the second image src to be another logo I have uploaded to my media library. You can do the same – simply change the code “/wp-content/uploads/2019/09/email-logo.png” with the URL of your image.
3) Add some CSS to hide/show the logos
So we now have two logo’s on our site next to each other. We need to hide the fixed logo initially and then when you scroll, hide the main one and show the fixed. Luckily Divi add the class name “et-fixed-header” to the header when you scroll down. We can use this to hide/show the logos. The code below will do this for us. As you can see I am using display: none and display: inline-block which will hide and show the logos respectively.
One thing to mention is because we changed our fixed logo to not have an id of “logo” but have “fixed-logo” – the CSS that Divi adds to the logo wont be there on the fixed one. So we manually added this.
And that’s it!
This is all there is to it, you now have a logo that changes when you scroll. You can download the child theme using the link on the right or create it yourself, either way I know you will have great fun with this.