Fixed Divi Theme Builder Header
Make The Entire Divi Header Fixed
We have a huge list of tutorials in our Divi header series, but there is always room for more! You may remember that we already have a tutorial and video for How To Make A Fixed Divi Header, but we wanted to address another specific issue that some users asked about. The question is this: “How do you make a fixed header using two sections?” The answer is easier than you think, but we can’t use the default Divi settings. To make a header fixed in Divi with more than one section, we need to make the entire Theme Builder header fixed with CSS. I’ll show you how in this video and in the rest of this post down below.
▶️ Please watch the video above to get all the exciting details! 👆
#1. Create Your Header In The Divi Theme Builder
Start off by creating your Divi Theme Builder header. If you already have done this, great, just skip ahead.
From your WordPress Dashboard, go to Divi>Theme Builder. Create a new template, and assign it wherevery you want to dispaly it on your site. In our example, we chose to assign the menu to a specific page where we are show you the demo in action.
Click on “Add Custom Header” and in the popup choose “Build Custom Header.”

In the Divi Theme Builder template, go ahead and create your design, and of coursse, feel free to use more than one section.
In our example, we made the first section with a socil media icons and a secondary menu, then the second section with the main site logo and menu.

#2. Set The Entire Divi Header To Fixed With CSS
Normally, with only one section in your Theme Builder header template, you would go to the Section settings to the Position toggle in the Advanced tab. But because we have two sections, setting them both to fixed would just cause them to overlap.
Instead of setting individual sections to fixed, we are going to set the entire Divi Theme Builder header template to fixed with a little bit of CSS. All you have to do is copy and paste this into your website.
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.
/*make entire Divi Theme Builer header template fixed*/
header.et-l.et-l--header {
position: fixed;
width: 100%;
z-index: 9999;
}

There you go! Now you can use more than one section in the header template if you want to and still have it fixed!
If you notice that the header overlaps the page content, and want a genius way to solve it, check out our other tutorial called How To Automatically Stop Your Fixed Divi Header From Overlapping The Page And Push It down Instead.
Don’t forget, we have tons of tutorials in our Divi Header series!
Hello! Is there anything in the works for a tutorial for creating a top header that shrinks and disappears on scroll, while the main header remains on scroll? I haven’t figured out how to do this in the theme builder.
I’m not quite sure what you mean, sorry.
Nevermind. I had to add the script as well. Thanks so much for the tutorial!
Weird. I have a three-section header built with the Theme Builder. I applied the CSS in the theme options and the first two sections disappeared. The third section is fixed, but the two other sections disappearing is a deal-breaker. Any ideas?
thanks for your great tute’s that I’ve only just discovered – although I’ve also already checked about 9 of them 🙂
YES NINE!
That’s great Steve! I release 1 or 2 every week, so I hope you enjoy!
Hi Nelson,
I have been following your tutorials on building headers in Divi. I have learned a lot so thanks vey much. I am trying to build a variation of the header that I don’t think you have discussed. I want to create a header with two parts. In one of your videos you said you can do this with 2 rows in the same section or with 2 sections. When you hear what I am trying to do, maybe you can advise which is the better method.
Ok … I am trying to design a header that has a large area for text at the top and a more narrow section or row below that contains the menu. When someone scrolls down the page the top section/row scrolls up and off the page but the narrow menu section/row becomes fixed at the top of the page.
Is this possible? Thanks again for all you do.
Bill
Hi Bill,
You just described my other tutorial here: https://www.peeayecreative.com/how-to-make-any-divi-section-stick-to-the-top-when-scrolling/
Let me know if you need anything else!
Hi Nelson .
Amazing tutorial.
it´s what I looking for my header.
I have two sections and this video resolves the problem and works perfectly.
Many thanks !!
Hey that’s awesome, so glad I could solve your issue!