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!
▶️ Please watch the video above to get all the exciting details! 👆
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!
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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!
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;
}
As I want to do the same (gradient background… Have you solved this issue? What adjustments did you make to the css?
I created the header colouring I wanted in the divi builder and then in the CSS I set the background to “inherit !important”. This allowed me to created the gradient background I wanted without compromising the ease-out transition. I hope it works for you too!
/*set the defautl background color of the header section*/
.pa-header {
background: inherit !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;
}
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 should use one or the other. I’m guessing that including this on theme options will include for the whole website, but I might want to use this on the homepage and not on the products page? makes sense? I hope it does…
Thanks again
Cheers
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 like that!