Code by Day | Explore By Weekend
How To Change The Color Of A Fixed Divi Header Menu On Scroll Tutorial by Pee-Aye Creative

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.

<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!

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.

/*set the defautl background color of the header section*/
.pa-header {
	background: transparent;
	-webkit-transition: background-color 2s ease-out;
	-moz-transition: background-color 2s ease-out;
	-o-transition: background-color 2s ease-out;
	transition: background-color 2s ease-out;
}


/*set the background color of the fixed header when scrolling*/
.pa-fixed-header {
	background-color: #000;
	-webkit-transition: background-color 2s ease-out;
	-moz-transition: background-color 2s ease-out;
	-o-transition: background-color 2s ease-out;
	transition: background-color 2s ease-out;
}

Here’s how that will look!

add CSS code to Divi to make the header menu fixed when scrolling
10

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

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
31 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jacob
Jacob
4 months ago

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

Senan Bashy
Senan Bashy
4 months ago

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!

Luís
Luís
3 months ago

Thank you for this tutorial. Very useful indeed. I have one question, I see that you always include the code snippets in the Divi theme options. Can I do the same but instead on the theme include in a code module inside a section? And the CSS can be included in the section or row? One good tutorial you could create would be where to include the code or jquery snippets (divi options, code module, or in the advance tab in some specific modules like the header module or blurb module) and when (what’s the differences and cases where we… Read more »

Luís
Luís
3 months ago

Hi again 🙂
I’m playing with your code and it works perfectly. Thank you!

But, instead of background color, I wanted to include a gradient instead.
What happens is, when I scroll down, the smooth effect of 2s doesn’t work.

Any idea how I can fix that?

Many thanks

CSS code:

/*set the background color of the fixed header when scrolling*/
.pa-fixed-header {
background: rgb(2,103,173);
background: linear-gradient(180deg, rgba(2,103,173,1) 0%, rgba(22,155,214,1) 100%);
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}

chris
chris
3 months ago

Thank you so much it’s awesome !
But i’m facing an issue on safari browser, The second menu background is only half of the size it should be… Do you have a solution ?

chris
chris

Thanks for your answer, but unfortunately it doesn’t work on ipad or iphone so i’m confused about it 🙁

Chris
Chris

You are right, it,s safari…

chris
chris

well… Solved : The problem was between my laptop and my chair lol

Laura
2 months ago

It work super! Just one quest, how can I change the text colour + logo + Instagram icon when fixed?

Lisa
Lisa
1 month ago

What about the dropdown menu? I got this to work but I want the dropdown menu items to also have a white (or any color) bg on scroll, right now, the main nav changes color on scroll but the dropdowns are clear.

Rob Scheerbarth
1 month ago

Hi Nelson, This is amazing. Great post. I have two things I’d like to add that I did for my site and I think will help people out there too (and please add them to the post if you want to). The first question is how can we add a background to the dropdown menu when the background of the menu component is set to the “default” or “transparent” like in the post. Seems that the background field in the menu component affects both the background of the menu elements and the dropdown menu. I’ve fixed this by setting the… Read more »

Fanny
Fanny
1 month ago

Hi Nelson 🙂
Thanks a lot for this video! Works perfectly!!!
I have an other question, how can I make this menu responsive for phone and tablet?
Thanks for all your tutorials.
Fanny
 
 

Dikra Bouchaouir
1 month ago

HI,
Thanks a lot for all your job to helps us.
It works super ! Just one question, how can I change the text color of all the items at the same time when hover on them as this site :
https://www.brassart.fr/
And this is the link of my site :
http://byauctavia.com/ensmiv2/
Thanks a lot

Dikra Bouchaouir

Hello thanks for your return
yes I figured it all is ok now

Ricardo Marques
Ricardo Marques
15 days ago

Hello! Thanks for the tutorial! There is a small issue which is that if user refreshes the page or if you start mid-page (with an anchor link for example), the header will be transparent wich will not look good because of all the page elements behind. As soon as user scrolls more than 100px, the pa-fixed-header styling kicks in. Is there a solution for this?

Juan
Juan
12 days ago

Hi, and thanks for this tutorial.
I have a problem because I can’t get to change the color in the section, but if I add the class to the inside row, then it works.

You know why it can happen?

Juan
Juan

Of course: <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> /*set the defautl background color of the header section*/ .pa-header { -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out; } /*set the background color of the fixed header when scrolling*/ .pa-fixed-header { background: #000; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out; } When I do the scroll with the inspector opened, it get the new .pa-fixed-header class, but nothing else… Read more »

Last edited 7 days ago by Juan
Juan
Juan

Hi Nelson,
I’ve tryied adding !important in the CSS without results, so I added the class .scrolled to the section and I managed it by jQuery.
I don’t know if is the best solution, but is the only method that has worked for me.

<script>
 jQuery(document).ready(function($) {
  $(window).scroll(function() {
   if ($(document).scrollTop() > 100) {
    $(“.scrolled”).attr(“style”, “background-color: rgba(21, 26, 36, 0.9)!important”);
    $(“.scrolled”).prop(“style”, “background-color: rgba(21, 26, 36, 0.9)!important”);   
   } else {
    $(“.scrolled”).css(“background-color”, “rgba(0, 0, 0, 0)”);
   }
  });
 });
</script>

I’ll keep visiting your blog because it’s really interesting.
Thank you very much!

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart