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: #000000!important;
	-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
33
Last updated Jan 3, 2021 @ 1:07 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

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
81 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jacob
Jacob
11 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
11 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!

Gosia
Gosia

Hi, I would love to see, what more can you change. I’ve tried to play a bit but without success.

Luís
Luís
9 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
9 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
9 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
8 months ago

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

Alex
Alex

I’m trying to achieve this too – with text color – but not sure how to follow the above advice(?)

Lisa
Lisa
7 months 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
7 months 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
7 months 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
7 months 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

Miki
Miki
Reply to  Dikra Bouchaouir
1 month ago

Would you be so kind to share this? I have the same, but not figured it out yet…

Ricardo Marques
Ricardo Marques
6 months 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?

Fred
Fred

Hello ! It’s the case for me. If I refresh the page too.

Juan
Juan
6 months 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 6 months 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!

elkin
6 months ago

Hello, It can be done with generatepress + divi builder and I have not generated the same result

Amber
5 months ago

What should I do if I previously set a navigation? This may not be showing up for me because of that? For the time being I have removed all code and items from theme builder. Thanks

Amber

Before I tried this I had already set the navigation options in the theme options area. I chose fixed nav and in the theme customizer made the background clear. Should I set this all back to default and try your solutions. Having previously selected these settings conflicted big time.

Valentin
Valentin
5 months ago

Hello,

Thanks for the great tutorial. I would like to change the color of the menu (text) when I scroll. I tried to follow your instructions in the comments, but without success.

Can you enlighten me?

Thank you very much for your help.

Valentin
Valentin

Ok it works now… Thank you very much 🙂

Valentin
Valentin
Reply to  Valentin
5 months ago

Hi,

I have an other question : how to change the color of the burger menu on mobile ?

Thank you !

Ollie
5 months ago

Hi Nelson,
Thanks for this great tutorial. Just what I needed.
Weird thing happened though, I had it working beautifully and then did some more tasks, came back and it was no longer working.
Would you be able to have a quick look and see?
http://ourmb.wyfoldcreative.com/what-is-the-microbiome
Many thanks,
Ollie

Ollie
5 months ago

Hi,
Just expanding on my first comment, it looks to me like the jquery is not loading:-
DevTools failed to load SourceMap: Could not load content for http://ourmb.wyfoldcreative.com/wp-content/themes/Divi/js/custom.unified.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
I can’t understand why it was working and then stopped.
Would you be able to help at all?
Many thanks,
Ollie

Ollie

Hi Nelson,
Thanks so much for your reply. I thought it might be.. it has however sorted itself out. Not quite sure why but possibly a Divi update.
Looks great, thank you

LPBourso
LPBourso
4 months ago

Hello,

Thank you !

I have a question : how to change the color of the burger menu on mobile ?

Thank you 🙂

netzih
netzih
4 months ago

Thanks for this amazing tutorial.
Worked well for me however for some reason it’s not working on the Shop page (woocommerce) built with divi.
It’s coming up transparent and not changing on scroll.
Is there any reason it would do that? (as far as I can tell it work fine on all other pages including cart and checkout pages.

Netzih
Netzih

Thanx. Will try tomorrow
Anothe question, I would like to do this for the default divi header instead of creating a new custom header, what do I put in to replace the PA-header? Is there a way to set a custom class to the default divi header?

jamiepudsey
jamiepudsey
4 months ago

Ahh this tutorial is exactly what I’m looking for to use on my site!

The only problem is that I’ve followed this tutorial line for line and it is doesn’t seem to be working for me and can’t for the life of me work it out.

Have you had any common problems with it not working?

Many thanks,
J

jamie pudsey

I’ve fixed it now, no worries!
Cheers for all the great tips. 👌

Ernesto
Ernesto
4 months ago

Hi there, thanks for this code. Working! I have a question. Is there a way to add s line of code to change the font color also? I tried adding this before the transition arguments but it didn’t work

font-style: color #000000;

Ernesto
Ernesto

Forgive my ignorance, I don’t have much coding knowledge other than copy pasting and very little html. I’m probably doing it wrong.

I tried inserting the row in the below, but it didn’t work

/*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: #b3b3b3!important;
.et_pb_menu__menu>nav>ul>li>a { color: #000000;}
-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;

Ernesto
Ernesto

didn’t work. The .et_pb argument has a red x mark beside it like I’m using incorrect punctuation or something

Ernesto
Ernesto

Thanks again, I managed to partially make it work. I’ve spent about 4 hours toying with css today and have learned a little. I pasted the code I used below. The final challenge I have is that my header has 2 columns: one with text and the second one with the menu. The argument you gave me makes the menu work, however the text column doesn’t change color. I have spent about 2 hours searching the internet and trying multiple ways to change it, but haven’t succeeded. Could I bother you one last time for this one please? css that… Read more »

Ernesto
Ernesto
Reply to  Ernesto
3 months ago

All good, figured it out 🙂 I learned how to use the inspect element to find any css target. Thanks a lot for the code!

Federico
3 months ago

Very nice! Many thanks! but I don’t understand why now the mobile drop down menu is transparent .. any suggestion?

tommie
2 months ago

Thank you! its working perfectly. but how to include the font color, logo and button color so i can make a total switch

Julien Marescaux
1 month ago

Hi Nelson, I love your tutorial and that’s what I needed but it’s not working properly for me I can see where the problem is but I can’t solve it. Can I ask for your help?

marescaux.julien
marescaux.julien

Thank you very much Nelson! You’re awesome 

Miki
Miki
1 month ago

Hi Nelson,

Thank you so much for the tutorial, it’s great! The only thing is: my footer dissapears when I save my template in the Divi Themebuilder. What am I doing wrong?

Miki
Miki

no, it’s standard in the childtheme I use.

Miki
Miki

I downgraded WordPress 5.6 and it’s working properly now!

Gosia
Gosia
18 days ago

Hi, thank you for all your tutorials. I think I understood the machanism of making changes.
But I have a problem with the dropdown menu. I know how to target and change the background color in css, but it doesn’t work because the bgcolor is already set with
!important in .et_pb_menu_0_tb_header.et_pb_menu .nav li ul. I don’t know where to change that. I want the background to be white at the beginning and gray with transparency when scrolling.

Nadia
Nadia
14 days ago

Hello, I just started building a test site to get familiar with Divi as a new user. Your tutorials have been extremely helpful! The overall concept did work for me, but I’m having an issue that the solid header background once it has scrolled is only covering half of the header logo/text. https://msbeta.messengersmith.com/
What am I missing? Thank you!

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 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart