Stop The Fixed Theme Builder Header Overlap
Another Clever Solution by Pee-Aye Creative
By now you have probably our huge list of Divi Header tutorials. Some of them include making the header transparent, fixed, shrink or change color on scroll, and more! The one thing that everyone keeps noticing with the Theme Buider header is this — the fixed header overlaps the page content. We can’t have that!
This tutorial will not give you the same old solutions others are saying. Margin on top of the header, padding on the first section, and math are all…boring and innefficient. Our solution will automatically solve your fixed Divi header from overlapping the first section no matter how tall it is. Now math or margins needed!
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.
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;
}
}
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.
Hi Victor, this is for the Theme Builder, so it would not affect the default header in any way.
Thanks Nelson…much appreciated.
You’re welcome, Stephen!
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?
Hi Daniel,
That’s a great question. I think maybe the easiest solution is to make sure the item you are linking to is within the section far enough that it won’t overlap. So for example, the ID of the row or module instead of the section.
Thanks for this, it is simpler than what elegent themes has put out.
Yes, it is funny that they released their tutorial three days after mine. This solution is much simpler and doesn’t require all the extra code and classes.
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.
Hi Morten,
Can you share a link or any more details? Something doesn’t sound right there.
Hey Nelson, love the tutorial and it’s amazing, thanks for sharing, but my site is doing the same thing too: https://lukekohen.com/
Hi Gabriel,
I’m not sure why without knowing all the details, but you can fix that with this: #et-main-area {padding-top: 0px!important;}
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
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..
Hi Solomon, the reason is because when the screen sizes changes the header height changes.
Hi Tevya, I think you are thinking of something else. This tutorial and code are not made for a two-section scenario, because remember, we don’t set the “position” in the header, we set in the sections, and you can’t have two fixed or two absolute sections in the header. So our code has nothing to do with that. You mentioned a fixed row…dodon’t do that. If you are want to have two sections with one fixed, sure, go for it, but use sections, not rows. You can even fix the second one as it scrolls and let the top one… Read more »
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
Hi Gabriel,
But if the menu is set to Position absolute, and it is transparent…then it’s not possible. People would see into the back of your computer 🙂
thanks for the tips, it helped me
You’re welcome!
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
Hi Chris,
It looks like you got it resolved, let me know if you still need help!
I found a workaround. Thanks
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
Hello Nicolas, great to hear from you and so glad you found this solution!
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?
Hi Linsey,
That would be expected behavior since the code here is meant for the main header. I’m not sure how to do it with two sections where one is sticky and one isn’t.
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 »
Hi Stefanie,
It sounds like you are talking about anchor links, which is quite unrelated to this post. For that, you enter an ID in the section, and then for your link, you just use the same ID with the # sign. Does this help?
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.
It sounds to me like you just need to adjust where your anchors are. Other than that, I don’t really know if there is an answer, that’s just how it is if the menu is too tall.
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 🙂
Hi Breeno,
I’m really not sure. There are quite a lot of solutions on Google for this, but I havn’t figured out to get it to work with Divi.
Thanks for the reply Nelson
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!
Hey John,
I’m so glad you found our blog! We have over 20 videos and tutorials on just the blog module, so I’m sure you can find lots of good stuff here 🙂
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 »
Hi Erik,
So you got it working? If so that’s really great, looks good to me!
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
Hi Craig, so do those pages have the Divi Theme Builder header on them?
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.
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?
Hi Rob,
I’d have to see a link to understand what is going on with your site.
It’s the tablet or phone view of http://www.openhousenorwich.co.uk
Thanks
Hey Rob,
I don’t see any issue. There may be a very slight overlap, but the way you have it made there is nothing being cut off or hidden that I can see.
gracias,
es genial cuando encuentras la respuesta correcta en el primer click!
I’m very glad you found the solution in our tutorial! 🙂
Sometimes the padding-top is miscalculated, can you help me?
https://www.dwf.it/chi-siamo/
I’m not sure why it is doing that for your site, sorry!
Hi Nelson, I have integrated the code but I cannot get this to work on my website.
Hi Kelvin,
If you are referring to the linked website then that is because that site is using the default Divi header and that is not relevant to this post, nor does it have that issue. Is that the site you meant?
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.
Thank you! This solved my problem well. I wish I had looked for it earlier, but glad to have it moving forward!!
Glad to help Cyndi!
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.
Awesome, glad you found our tutorials!
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.
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
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???
Hmm, I don’t see anything wrong. I have heard from others that sometimes a box shadow will mess it up on some browsers. Worth checking.
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?
If the header was transparent, it would have to be fixed or absolute over the page content…otherwise we would see into your computer monitor 😉
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.
Hi Leslie,
Maybe try targeting the header or sections that you want in the code with a custom class.
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?
Hi Darsheel,
Not sure what you mean, sorry!
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!
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?
Hi Victoria,
I’m not sure what you mean with the footer. Do you have some example?
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.
The bottom of the page looks like this