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!
▶️ Please watch the video above to get all the exciting details! 👆
Keep The Fixed Theme Builder Header From Overlapping The Page
The premise 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
If this describes the setup you are using, then our solution will work great!
Check Our Related Guide!
We made a separate tutorial and video about How To Make A Fixed Divi Header Menu.
This tutorial was made as a follow-up to that that situation, one that is causing many of your issues. So here it is, the solution you’ve all been waiting for and it works automatically!
Divi 5 Compatibility Note:
For Divi 5, we noticed the “Stick To Top” option is needed in the Scroll Settings toggle instead of the fixed position.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery 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 scripts.js file (don't forget to remove the <script> tags at the beginning and end). 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>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Divi 4 Code
<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>Divi 5 Compatibility Code:
We have noticed some changes in Divi 5 that have affected this tutorial. Please use the code below for any website using Divi 5.
Divi 5 Code
<script>
jQuery(window).on("load", function() {
var totalHeight = 0;
jQuery(".et-l--header > .et_pb_section").each(function() {
totalHeight += jQuery(this).outerHeight();
});
jQuery("#et-main-area").css("padding-top", totalHeight + "px");
});
</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 someone 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 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.
@media all and (max-width:980px){
#et-main-area{
padding-top:0px !important;
}
}
Hi Nelson
In DIVI5 alpha this code is causing whitespace issues between the header and the main content. Is there a, updated code for divi5?
KR
Jelle
Hi Jelle!
We have added a solution for Divi 5 above. Please check and let us know if it helps!
Hey there!
I have a mega menu on my desktop site and it seems to be causing too much spacing above (I guess it’s miscalculating the height of the section). When the mega menu is disabled it works perfectly!
It would be great if there is some workaround… The website is livingripples.au if you get the chance to take a look.
Thanks!
I’m having the same issue because of mega menu in my header. Perhaps you already found the solution please let me know.
Thanks in advance
Hi Anas!
We’re not able to replicate the issue on our test page. Can you please share the URL of the webpage to check further?
Hi Nicole!
I’m not able to see the overlapping on the page with the theme builder menu. Can you please let me know if it is happening on a specific screen size?
Hi, Thanks for this tutorial!
At the website I’m building it works fine on desktop, but on tablet and phone there is still an overlap.
Is there a way to solve this? Or am I doing something wrong?
First I also had the ‘shrinking by scrolling’, but I’ve deleted everything for now to see if that would help.
https://boyoma.be/
Still working on the website.
Thanks!
Lien
Hi Lien!
Thank you for sharing the URL. I have checked the page and the first section of the page is below the header and working fine. However, the hero section background image is cropped which makes it seems to be overlapped. Please change the background image position and try using a portrait mode image for tablet and mobile.
Hi Nelson thanx for youre great job !
i am having trouble with this snippet when i use it with inline centered menu in divi whereas it works fine on the left aligned menu: there is still a half menu height overlapping.
can you help me ?
best regards.
Hi Guillaume!
The script is working fine for the centered inline menu. Could you please share the URL of the website? It will help me to understand the issue better.
Hi Nelson,
First, thanks for your great tutorials!
I’ve used the JQuery Code from https://www.peeayecreative.com/how-to-change-the-color-of-a-fixed-divi-header-menu-when-scrolling/ to start with a transparant header before scroll on the homepage. On all other pages I just have a regular fixed header with a white background. On those pages the header overlaps the page content. I thought I’d add the script from this tutorial to fix that, but it ruins the transparency before scroll I had set on the homepage.
Is there a way to combine both scripts? Thanks in advance!
Hey Noor,
Could you please share the URL of the page where you are facing this issue in order for me to fix it for you?
Hi Hemant,
Thanks for your reply. It’s a website in development and still behind a maintenance page.
So I prefer if you don’t publish this response. I don’t need any other visitors there. Thanks!
This is the website:
https://nieuw.matchconsulting.nl
I’ve removed the script from this tutorial, because it didn’t work combined with the other script.
So I’m looking for the script that I can use to keep the effect that I have now (transparency on homepage header before scroll), without the header covering content on all other pages than the homepage.
Thanks again!
Thank you for taking the time to teach us and share your knowledge. I applied this to my site, it works for desktop version…it doesn’t for tablet or phone…any solutions for these devices? Still want the header to remain sticky/fixed to the top of the page even on tablet and phone.
Thanks again.
Could you please share the URL of the website where you are facing that issue for me to investigate further?
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 at…
https://soildevelopment.v3zn6mr9-liquidwebsites.com/
Or if that has disappeared when we go live at….
schoolofintegratedliving.org
Hi Erik,
So you got it working? If so that’s really great, looks good to me!
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 scroll. Just add this code to the bottom section on your page in the section CSS main element:
position: sticky;
top: 0px;
z-index: 9999;