Fixed, Transparent, And Changing Divi Header
Combining All The Header Tutorials Together
As we go through our Divi header series, you probably notice a few of our tutorials overlap a little. This one works perfectly with two of our other tutorials. Our last one showed us how to create a fixed header in the Divi Theme Builder, and the one before that showed how to have a transparent header with the Divi Theme Builder. This tutorial combines the fixed and transparent tricks and adds on a new one. This Divi tutorial will show you how to change the Divi header 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.
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.
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! 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!
#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!
Thank you. This is what I’ve been looking for for a website I’m working on right now.
That’s great, Jacob! I’m glad this was timely!
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!
Yes, exactly Senan! Thanks! You can do a lot with that class too, not just background color. I’ll update the article with some new ideas as well.
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 »
Hi Luís, I’m so glad you are finding our tutorials helpful! Thanks for asking, and that’s a great suggestion for a tutorial. There are six places you could put code, but I would not recommend using the code module. It’s best to put it in your child theme, but I usually say “Theme Options” because I know I have beginners who don’t have child themes and that’s fine. So the best place I recommend is the Theme Options. Even if you were wanting the code to affect a certain page, it’s still best. I will definitely work on a tutorial… Read more »
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;
}
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 ?
Hi Chris,
I don’t have any ideas, I don’t have access to Safari and I wouldn’t want to if I did. They are so far behind web standards, and there are so many issues with it that I would recommend against using it. I heard they may actually switch to Chromium, like Edge did, and that would be awesome.
Thanks for your answer, but unfortunately it doesn’t work on ipad or iphone so i’m confused about it 🙁
Sure, but that would not be relevant to our tutorial though. We are simply adding a CSS class with jquery, then adding CSS and we even have all the browser prefixes included. So it’s either an Apple thing like I suspect, or a Divi thing.
You are right, it,s safari…
well… Solved : The problem was between my laptop and my chair lol
It work super! Just one quest, how can I change the text colour + logo + Instagram icon when fixed?
Hi Laura,
You can use what I have already in the tutorial as a system, and change out the parts of the CSS that target a certain thing.
For the menu items use this: .et_pb_menu__menu>nav>ul>li>a
For the Instagram icon use this: .et_pb_social_media_follow li a.icon:before
To change the logo is harder, I have a separate tutorial coming for that.
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.
Hi Lisa,
You can set the background color of the dropdown in the Menu module. By default it is transparent now (not sure why).
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 »
Thanks for sharing Rob,
I’ll certainly leave your comment here for others to see if they want the same thing as you described!
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
Hi Fanny,
It is responsive by default. Is there something in particular you need help with?
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
Thanks Dikra, you are welcome! I enjoy helping! 🙂
I looked at both links and either you figured it out already or I am missing something. Can you let me know?
Hello thanks for your return
yes I figured it all is ok now
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?
Hi Ricardo,
I’m a little confused. You are saying if a user lands on an anchor link halfway down the page, the menu is transparent?
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?
Hi Juan,
That sounds odd, could you do it like the tutorial then share the link so I can see the code?
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 »
Hi Juan,
It looks like you probably need to add !important to the background, so “background: #000!important;”
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!