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:
divi-child-theme
– functions.php
– header.php
– style.css
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.
Hi. Is it possible to use this on specific pages?
Yes you could but would require more coding – you would need to check if it is a specific page ID – check here: https://stackoverflow.com/questions/16353441/wordpress-how-to-insert-code-to-header-for-a-specific-page-only
I’m having exactly the same issue as Markus below. Worked perfectly until I enabled a global footer, then it just does’nt change on scroll anymore.
I’m not overly techy so can’t fathom a solution, but I’ll watch these comments with hope for someone else with a techy mind! And in the meantime, just wanted to flag it as another occurrence. And thanks for taking time to provide this – it was looking great!
Just did a test – if you copy the “theme-header.php” file from your Divi theme and add this to the child theme folder where your header.php file is. Make the changes in this file instead of the header.php file and it will work.
You.Are.A.Legend!! Thanks so much. Works perfectly again.
Anyone ever tried if these awesome instructions work as well when adding a global footer? I do not know how this is connected but as soon as I add a global footer the fixed-logo won’t load anymore. Scrolling down loads the fixed header, but the logo simply does not change. As soon as I delete the global footer from the Divi Builder it works again.
With a global footer the following line for the fixed logo is simply not there. It feels like it’s not taking the header.php from the child theme but the parent theme.
Would love to change the logo on the header AND use add my own global footer at the same time.
Sounds interesting. I have not tested this since the new Divi theme builder.
My solution would be to create a custom header as well. Use the image module for the two logos and hide the one for normal/scroll like the blog post talks about. So just give one image module the class “main-logo” and the other “fixed-logo”
let me know
Unfortunately, I do not think that will work this way. If I create a custom header myself I’ll lose the entire default/fixed header feature on scroll. Do you have anything else in mind that could help?
Not sure as haven’t tested it this way, I assume it would be no difference as it is still using your child theme header. I will check this when I get some time, in the meantime you could ask Divi why it is not taking your child theme header when using the theme builder footer?
Thanks for your quick reply. I am reading through many other tutorials if I can figure something out. A custom header means implementing 1) shrink on scroll, 2) change background on scroll, 3) make sticky on scroll, 4) change logo on scroll myself.
Referring to the original issue, I noticed that it does use the child theme header.php – however, somehow it ignores the added code. I can add the same lines to the parent header.php and still get the same result (that it is not working).
If I figure something out I’ll share it here.
Just did a test – if you copy the “theme-header.php” file from your Divi theme and add this to the child theme folder where your header.php file is. Make the changes in this file instead of the header.php file and it will work.
Brilliant. This helped me a lot, thank you.
Pleasure – glad it helped!
This tutorial is crystal clear and it’s working perfectly.
My question and what i want to do is to modify the animation when you scroll (when the logo switched), i’m not an expert in css and i tried to change the transition of the #logo{…} in the style.css file, but nothing happened. I searched on the Internet and i can’t find any information about it. This tutorial is the one which goes as this far.
I don’t know if you can help me, but i tried !
Thanks.
Thanks – glad it worked.
You need to target the fixed logo which would be #fixed-logo.fixed-logo
Great tutorial. I was looking for the same. The only problem I am facing is, on scrolling down the fixed logo size is not the same as the main logo. I have set it to 80 and replaced in the code tag too for the fixed logo. Any directions?
Thanks
Can you send me a link so I can take a look? If sensitive, please email su*****@di********.com and I can help there
Hello,
Thanks for the code.
Is there a way to translate the second logo (the one in the sticky menu ?). I am using WPML.
Thank you.
What do you mean to translate the logo? The logo is an image so is not text?
Hi there,
your code works flawlessly! Thanks!
I just have a problem when I scroll back to top: the fixed logo doesn’t change back to the original (main) logo, unless I scroll down to mid page, and then I scroll to the top very fast.
How can I fix this issue? Thanks.
Not sure what you mean – can you send me the link of your site? Maybe email su*****@di********.com with it if you prefer to not share it here
Hi, trying to apply this for a centred inline logo. What MODs should I make as the contained css etc. doesn’t seem to work
Hey Gavin, yes it is different, seems as though Divi use JS to implement the logo. I will try to see how we can do this but I would imagine it would be custom JS.