Swap The Divi Theme Builder Logo
Another Header Tutorial To Compliment Previous ones
At this point in our Divi header series we have covered quite a lot! We have so many tutorials and videos on this that I keep thinking there can’t be any more to make, but here are! This one will show you how to change/swap/replace the logo in a fixed Divi Theme Builder header.
One of the requested tutorials which will go along with some of our previous ones is to change the logo image in the Divi Theme Builder header menu you scroll. This would be for fixed headers.
This one is going to go along perfectly with some of our previous tutorials:
How To Change The Color Of A Fixed Divi Header Menu When Scrolling
#1. Create Your Fixed Divi Theme Builder Header Menu
From your WordPress Dashboard, go to Divi>Theme Builder. Create a new template, and assign where needed. In our example, we chose to assign the menu to a specific page.
Click on “Add Custom Header” and in the popup choose “Build Custom Header.”
In the Divi Theme Builder template, create a section and add a row with any layout you want. In our example, we used a logo, menu, and button.
The most important part here is adding the CSS class to the section. Go to the section settings to the Advanced tab and add the class “pa-header” as shown in the image below.
Be sure to set the header section position!
Go to the section settings to the Advanced tab and go down to the Position toggle. Set the position to Fixed.
#2. Add Some Custom jQuery Code
This Code Will Add A New CSS Class On Scroll
Now for the fun part! You don’t have to worry about adding code because I’ll show you exactly where to add this and you will do just fine copying it to your website!
From your WordPress dashboard, go to Divi>Theme Options. Then look for the Integrations tab at the top. Once you are there, you will see a code input area that says “Add code to the < head > of your blog.” That’s the input areas where you need to paste the code snippet below.
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery(".pa-header").addClass("pa-fixed-header");
}
else{
jQuery(".pa-header").removeClass("pa-fixed-header");
}
});
});
</script>Here’s how that will look!
#3. Add Some Custom CSS Code
This Code Will Shrink the Divi Menu Items When Scrolling
In step #2, we added some jQuery code that activates a new CSS class in the header section when the page scrolls. Now, we need to tell that class what to do. In our other tutorials, we were changing the background color and making it shrink, but in this one, we are going to replace the logo image.
Replace The Logo Image
As the user scrolls, the header stays fixed. But since the background color may be changing, or perhaps you are shrinking your header (from our other tutorials), you may also want to replace the image.
One good reason to do this is if you change the color of the background when scrolling, your logo might not look good with the new color.
To do this, we need to add the following code snippet to our previous one.
/*replace the logo when scrolling*/
.pa-fixed-header .et_pb_menu__logo img {
content: url(INSERT NEW LOGO IMAGE URL);
}
thank Nelson
great tutorial as usual
Thanks Zamir, glad you like them!
Hi, very helpful tutorials.
In Firefox the Logo Change doesn’t work?
Should be fine in Firefox. Have you tested that?
I can confirm, Logo change does not work in Firefox (78.0.2 (64-bit) at least not on Mac
That would be strange for universal code not to work.
Yeah, confirming as well :/ Strange
Hi Peter!! Fantastic tutorial! I changed the logo and the color when scrolling, but there is a gap between the new scrolled section and the top of the page. I adjusted the html to 0px, but the gap reappears when I scroll. Any suggestions? Here’s the site. http://ifh.wpengine.com/ I apologize for the http, but this is the staging site, and I don’t have any control over installing a certificate. Michelle /*set the defautl background color of the header section*/ .pa-header { background: transparent; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; }… Read more »
Logo change is working in Google Chrome, Edge Developer & Brave browser but not in Firefox Developer Edition. On inspect, found that the CSS doesn’t have any effect in Firefox.
That’s weird! No idea why.
I have the same problem… in all the browsers works fine but in firefox wont change… any idea or solution?
Nelson, your tutorials are super-useful and easy to understand, many thanks.
I’ve used the code for replacing the logo on scroll. But then the new logo does NOT link back to the h’page, like the original logo did.
I got round that by hyperlinking the column the image sits in, and on desktop works fine. But not on tablet/phone view. Any ideas?
Regards, Robin.
Hi Robin,
That’s interesting, the link in the module should work either way. Otherwise there would not be any way to do it that I know of.