Code by Day | Explore By Weekend

How To Replace The Divi Theme Builder Logo When Scrolling Tutorial by Pee-Aye Creative

How To Replace The Divi Theme Builder Logo When Scrolling

This tutorial will show you how to change the Divi Theme Builder header logo when scrolling and replace it (swap it out) with a different logo image.

#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.”

create a custom fixed Divi Theme Builder 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.

Builder the Divi Theme Builder header and set default background color and add class

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.

set the position of the Divi header to fixed.png

#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.

jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();

if (scroll >= 100) {


Here’s how that will look!

add code to Divi to make the header menu fixed on scroll

#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 {
Last updated Jan 3, 2021 @ 1:00 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
Zamir Gomeh
Zamir Gomeh
9 months ago

thank Nelson
great tutorial as usual

9 months ago

Hi, very helpful tutorials.

In Firefox the Logo Change doesn’t work?

Reply to  Peter
7 months ago

I can confirm, Logo change does not work in Firefox (78.0.2 (64-bit) at least not on Mac

Richard Pruzek
Richard Pruzek
Reply to  Peter
6 months ago

Yeah, confirming as well :/ Strange

Michelle LaRose
6 months ago

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. 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 »

Manas Mitra
5 months ago

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.

Maria Belen Gonzalez
Maria Belen Gonzalez

I have the same problem… in all the browsers works fine but in firefox wont change… any idea or solution?

Robin Jones
3 months ago

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.

1 month ago

Hello Nelson, I’ve successfully used your tutorials to create a global header with the Divi theme that swaps colors, logos and shrinks upon scroll. I’m having trouble changing the menu (upon scroll) from centered (with logo on top) to left-aligned (with logo to the left). In the theme customizer this setting would be under menu > design > layout > style (left-aligned, centered, inline centered logo). Is this something that can be changed, like your other tutorials, in the Theme Options > Custom CSS, with a line like .pa-fixed-header .et_pb_menu { code} or is this another beast entirely? I want… Read more »


Yeah, that makes sense after using the inspect tool to check out the code structure… it appeared that attribute of the module was deeper in the theme css. I eventually gave up on it to get the website going and just went a different route entirely and it’s all good. Work with what I got, ya know. But thanks in general… these tutorials are very helpful for those of us that aren’t adept at code. I barely understand it and was able to accomplish most of what I was going for with your instructions. Some day, I might take a… Read more »

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,200 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest


Your Cart