How To Make The Entire Divi Theme Builder Fixed with Two Sections Tutorial by Pee-Aye Creative

How To Make The Entire Divi Theme Builder Header Fixed (Even With Multiple Sections)

This quick snippet will allow you to make your entire Divi Theme Builder header fixed even if you are using multiple sections and rows!

#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.”

make the Divi Theme Builder Header fixed

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.

Two sections in a Divi Theme Builder fixed header

#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 Advaced 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 Divi>Theme Options>Custom CSS area.

/*make entire Divi Theme Builer header template fixed*/
header.et-l.et-l--header {
	position: fixed;
	width: 100%;
	z-index: 9999;
}
fixed Divi theme builder header template

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.

Fixed transparent header with Divi

Don’t forget, we have tons of tutorials in our Divi Header series!

18
Last updated Jan 3, 2021 @ 1:01 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

Leave A Response!

6 Comments

  1. jesus

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

    Reply
  2. Bill Andre

    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

    Reply
  3. steve

    thanks for your great tute’s that I’ve only just discovered – although I’ve also already checked about 9 of them 🙂

    YES NINE!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Welcome Hemant To Our Team

Welcome Hemant To Our Team

I would like to introduce you to our new team member, Hemant Gaba, who has been helping out with everything behind the scenes!

Pin It on Pinterest

0

Your Cart