How To Change The Color Of A Fixed Divi Header Menu When Scrolling

Today I'm showing you how to change the Divi Theme Builder header menu when scrolling, which enables a transparent to color background change!

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

NOTE: If you want the header to have a background color by default before it scrolls, then set that in the section. If you want to have a transparent header before it scrolls, then let the background as is by default.

The other 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! Don’t worry about adding code, I’ll show you exactly where to add this and you will do great!

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 where you want to paste the snippet below.

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 Change the Divi Menu Background Color On Scroll

In step #2, we add jQuery code that activates a new class in the header section when the page scrolls. Now, we need to tell that class to change the background color whenever it is activated.

From your WordPress dashboard, go to Divi>Theme Options. Scroll down to the Custom CSS box and paste the following code snippet there.

Here’s how that will look!

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

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Related Posts

Leave A Response!

4
Leave a Reply

avatar
  Subscribe  
newest oldest most voted
Notify of
Jacob
Jacob

Thank you. This is what I’ve been looking for for a website I’m working on right now.

Senan Bashy
Senan Bashy

Brilliant adding another class on scroll!
It’s like changing the background color of a standard Divi header with header#main-header and .et-fixed-header

Thanks Nelson!

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart