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;
}
}
61
Last updated Jan 3, 2021 @ 1:03 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

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
71 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Victor
9 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
9 months ago

Thanks Nelson…much appreciated.

Daniel
Daniel
9 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
9 months ago

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

Morten Nielsen
Morten Nielsen
9 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

Solomon
Solomon

Hey Nelson,
Thanks for the AWESOME tutorials, you always rock it.
I was wondering, why use the script if you can simply use this line (#et-main-area {padding-top: 0px!important;}) and just switch out 0px for however many pixels your header is? Personally, I used the script and it was acting up for me, calculating more pixels than needed on some pages.
But with this simple CSS, it does the job, and never acts up, and seems lighter than having a script load in the header..

Gabriel Zambrano
8 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
8 months ago

thanks for the tips, it helped me

Chris Bittner
8 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
8 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
7 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
7 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
7 months 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
7 months 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
6 months 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
6 months 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
6 months ago

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

Marco
Marco
4 months ago

Sometimes the padding-top is miscalculated, can you help me?

https://www.dwf.it/chi-siamo/

Kelvin
4 months ago

Hi Nelson, I have integrated the code but I cannot get this to work on my website.

Kelvin

Yes I am referring to the linked site. I know it is using the default header not the builder header but it does have the same issue. On first load it sits okay on both pages but when you scroll down then back to the top the content is overlapped by the header. I was hoping your solution would work.

Cyndi
Cyndi
4 months ago

Thank you! This solved my problem well. I wish I had looked for it earlier, but glad to have it moving forward!!

Dafydd Davies
4 months ago

Dude!!! What a beautiful bit of code. Thank you very much for this, I was entering margin spacing to force it down. This is so much more elegant.

Following your tutorials from now on.

Dafydd Davies

Hi there Nelson,

Not sure what’s going on but it’s not longer functioning correctly. It’s offsetting by around 50px. Not sure how to get it back where it was. Any suggestions? The webste is now live.

Any advice would be much appreciated.

Maurizio
Maurizio
4 months ago

hi all, i have this issue when i click on another page, go back with clicking on the menu to the main page, the menu section overlaps a part of the section.

Any ideas?

Thanks a lot

Chris Bittner
3 months ago

This works great, but for some reason it over calculates the size of the header. Do you know what could cause that? Here is an example https://aisdirect.com/ its leaving a white space of about 47 extra pixels???

theCreativeMind
theCreativeMind
2 months ago

how would you handle the container space issue if you made lets say a transparent header in the divi theme builder? maybe just offset the main-content area?

Leslie
Leslie
1 month ago

I have a transparent header with z-index on a homepage. I want it to overlap. On all other pages I have a header with a solid background, which I don’t want to overlap. This targets .et_main_area and affects the home page as well. Both headers are built in the theme builder. I’ve thought of excluding the home page witht an if statement, but am getting stuck.

Darsheel Savla
1 month ago

Hello, firstly thanks a lot for this tutorial and creating so much helpful content around Divi (really grateful to you). So I have added this snippet but there is content jumping as soon as I scroll down from the first section. Any idea how I can fix this?

Darsheel Savla

Hey can you have a look at this site https://gilmoreoak.com on mobile view. Once you scroll down a bit, the the content glitches a little, not sure why that is happening, it would be great if you could help me out!

Victoria
Victoria
4 days ago

Hello Nelson, great tutorial works great. I want to do the same with a theme builder sticky footer. What would the code/classes be in that case?

Victoria
Victoria

Basically, I have both a custom theme builder header and footer. I want them both to be fixed. The header (because of your code) doesn’t overlap with the content but the fixed footer does overlap with the content above.

pagetop.jpg
Victoria
Victoria
Reply to  Victoria
4 days ago

The bottom of the page looks like this

pagebottom.jpg

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart