Code by Day | Explore By Weekend
How To Automatically Solve Your Fixed Divi Header From Overlapping The First Section Tutorial by Pee-Aye Creative

How To Automatically Stop Your Fixed Divi Header From Overlapping The Page And Push It down Instead

This tutorial will solve the problem and automatically stop your fixed Divi header from overlapping the page content and push it down instead.

Keep The Fixed Theme Builder Header From Overlapping The Page

The premis for this solution is that you are doing the following two things:

  • You have a Theme Builder header set up.
  • You have that Theme Builder section set to Postion>Fixed

You may have seen our other tutorialon How To Make A Fixed Divi Header Menu On Desktop or Mobile.

How To Create A Fixed Divi Header Menu On Desktop or Mobile Tutorial by Pee-Aye Creative

This tutorial was made as a follow up to that that situation, one that is causing many of you issues. So here it is, the solution you’ve all been waiting for and it works automatically!

Just go to your WordPress dashboard to the Divi>Theme Options>Integrations tab and copy and paste the follow code snippet into the first section labeled “Add code to the < head > of your blog.”

<script>
jQuery(document).ready(function(){

var totalheight = 0;
jQuery(".et-l--header .et_builder_inner_content .et_pb_section").each(function(){
totalheight = totalheight + jQuery(this).outerHeight();
});

totalheight = totalheight + "px";

jQuery("#et-main-area").css("padding-top",totalheight);
});
</script>

All Done!

How cool is that! With just that snippet, we were able to automatically calculate the height of the fixed header and move the page content down accordingly.

We are very pleased with this solution, and if you know someoe who is struggling with a Divi header that is overlapping the page content, please share this tutorial with them! This is a great one to share in the Facebook groups!

Special Circumstances

The only caveat to all of this is IF you want to use a fixed position header on Desktop, but NOT on Tablet or Phone, you will get a space below the header. If that is the situation you are in, don’t worry, I already have you covered. Just add this CSS snippet to your Divi>Theme Options>Custom CSS box.

@media all and (max-width:980px){
#et-main-area{
padding-top:0px !important;
}
}
52

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
45 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Victor
4 months ago

Thanks! Will this code affect the old Divi 3 header in any way? I’m thinking about putting this code in my Divi child theme but I use the old (default) header for some websites and the new theme builder header for some websites.

Stephen Vaughan
Stephen Vaughan
4 months ago

Thanks Nelson…much appreciated.

Daniel
Daniel
4 months ago

Hi Nelson! I’ve used this code on a couple of multipage sites and it works great! I’m trying it on a single page scrolling website now and having the issue of the anchor link going too far and underneath the header. Do you have any ideas?

Nancy Mikyska
4 months ago

Thanks for this, it is simpler than what elegent themes has put out.

Morten Nielsen
Morten Nielsen
4 months ago

For some reason, my site is adding 342px, even though my header is 152px. I have 2 rows in my header, not sure if thats the reason.

Gabriel Miguel

Hey Nelson, love the tutorial and it’s amazing, thanks for sharing, but my site is doing the same thing too: https://lukekohen.com/

Gabriel Miguel

Nelson, thank you for responding to this! The CSS you provided worked, thanks so much, it’s a great help to have the header and everything auto-adjust…can’t believe they didn’t build this into Divi! Love your designs and content by the way

Gabriel Zambrano
3 months ago

I want to fix the Divi Header From Overlapping The Page as you explained, the problem is that my menu is transparent and that code doesnt work coz y dont have the position fixed option i have it in absolute for obvoius reasons the transparent menu wont work.
If there is a solution the menu is not overlaping a transparent menu and in mobile same story.

Thanks

jojo
3 months ago

thanks for the tips, it helped me

Chris Bittner
3 months ago

First off you lessons are awesome. I am working on a header and everything seems to work, but I am getting an extra space on the desktop when I use this code. The extra CSS works for mobile since the mobile is not fixed. The nav is currently only on a test page since this is a site I took over on and I am in the process of reworking it. The link to the site is below

Chris Bittner

I found a workaround. Thanks

Nicolas
Nicolas
2 months ago

Hello from France.

Thanks a lot, you saved my life. I was looking for a solution to fix the with line between the fixed header and the first content since 2 days… Thanks again

Linsey
2 months ago

Hello! My global header includes one section with a thin sticky header and a second section with the name of the site which is not sticky. Therefore, when I add the code you provided it adds a large space underneath the second section. I hope this makes sense. My site is not live yet so I cannot share a link. Is there a way to get around this issue?

Stefania Cocomazzi
Stefania Cocomazzi
2 months ago

Hi, thanks for this tutorial. I used the global theme generator section for my menu. But now I have a problem with the body section of the page. In photo 1 I show you the page I would like to create: there is a title, a short body, an index of contents and a long body. In the index I inserted the titles of the paragraphs with a link linking to the next section. For example, if the user clicks title 1, it goes directly to the Title 1 section of the page. In photo 2 I show you that… Read more »

photo.png
Stefania Cocomazzi
Stefania Cocomazzi

Thanks for the reply. I wrote the comment here because the problem came after following this tutorial to position the fixed menu on the page.
 
I have already used anchor links to do this, the problem is that since the menu is fixed at the top, the sections that have an anchor link do not get stuck under the menu but behind it.
 
I don’t know how to solve.

Breeno
Breeno

Thanks for the tutorial Nelson.

Stefania makes a very good point that I feel is very relevant to your post. Especially, if your content has anchor points that are linked to sections of you website or home page. There is no way to simply find a better anchor point position if one doesn’t exist in certain circumstances!

Is there a way to use anchors with some CSS offset -100px +100px to roughly match the newly fixed header in your tutorial? Any ideas would be very welcome and thanks for all the great tutorials you make 🙂

Breeno
Breeno

Thanks for the reply Nelson

John
John
1 month ago

You are a genius!!!!!!!!!!!!! I spent all day trying to figure out ways to solve this issue, and you helped me fix it in 5 minutes. I wish I would have found your blog earlier. Thank you!

Erik Haagensen
1 month ago

Hi Nelson,   Looks like I figured out my issue, but I can’t see or edit my prior comment, maybe its waiting for moderation.   Anyhow, the problem is that the padding applied to #et-main-area pushed that content down not from the top of the page, but from the bottom of the first section.   So, I changed your code too… <script> jQuery(document).ready(function(){   var totalheight = 0; jQuery(“.et-l–header .et_builder_inner_content .et_pb_section_3_tb_header”).each(function(){ totalheight = totalheight + jQuery(this).outerHeight(); }); jQuery(“.et-l–header .et_builder_inner_content .et_pb_section_1_tb_header”).each(function(){ totalheight = totalheight – jQuery(this).outerHeight(); }); totalheight = totalheight + “px”;   jQuery(“#et-main-area”).css(“padding-top”,totalheight); }); </script>   You can see it… Read more »

Craig Evans
1 month ago

Hello Nelson, I spent a few days trying to solve the problem (I’m a newb) until I found your page. Your tutorial is great and your solution worked perfectly. Thank you!
I have a new challenge now. The Divi fullwidth header on my home page and the fullscreen section (100vh) on another page are being pushed down the height of the header. Do you perhaps have a solution handy? 🙂 Thank you! Much appreciated! Craig

Craig Evans

Hi Nelson, they do now yes. I was toying around with the standard menu, but I’ve just recovered the Theme Builder header from a back-up.

Rob
Rob
1 month ago

This worked great, so thanks for the easy answers. However on tablets and smartphones, my menu from the header is now dropping down behind the below section. Is there a way to bring it in front?

Rob
Rob

It’s the tablet or phone view of http://www.openhousenorwich.co.uk
Thanks

wakowrz
1 month ago

gracias,
es genial cuando encuentras la respuesta correcta en el primer click!

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart