Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
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 your issues. So here it is, the solution you’ve all been waiting for and it works automatically!
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.
<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 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;
}
}
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.
I’m having the same issue – the code works, but just pushes it all down too far – how do I refer to the ID of the row or module instead of the section in the code?
I’m not sure exactly what you need, but you can replace the .et_pb_section in the jquery as needed.
Yes, I love this script (thanks Nelson).
Daniel, I know this is a little late, but for others like me who were looking for a solution, try copying the last line of jQuery and pasting an alternative underneath with the anchor ID (and page id if you’d like). Something like…
jQuery(“#et-main-area”).css(“padding-top”,totalheight); // for entire site
jQuery(“.page-id-123 #et-main-area #my-first-anchor”).css(“padding-top”,totalheight);
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 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;
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 🙂
Hi,
I am having this issue as well but it’s because on my homepage the menu is transparent and on all other pages the menus is not. Is there a way to just target my menu on all other pages?
Thanks
If you want to trigger all the other pages with the code but not the home page then this can be done by adding a condition for the home page in the code. So please go to the WordPress Dashboard > Divi > Theme Options > Integrations and place the code given below:
jQuery(document).ready(function(){ if(jQuery("body").hasClass("home")){ //Do Nothing }else{ 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, "background-color": "red", }); } });Here I have taken the unique class of the body tag of the home page and used it in the condition.
Please let us know if this code helps. 🙂
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
I’m experiencing a similar issue. The code pushes the website content below the theme builder header but adds an extra bit of white space between the header and content on desktop. How can I prevent this from happening?
I tried adding the below code to the Custom CSS. That ended up pushing the content behind the header again. Can you please help me solve this issue?
#et-main-area {padding-top: 0px!important;}
Here’s an example URL – https://bzl.d3c.myftpupload.com/our-story/
Hey Casey,
I am not able to replicate this issue on my end, could you please check the URL in incognito mode and let me know how it goes?
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 if the user clicks on “title 1” the section title does not stop under the menu but behind it. That is, a part of the title 1 section disappears behind the menu. In this way the user reads only a part of the body and not the whole section of title 1.
How can I solve it? Thank you.
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 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!
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
This was just what I needed, wow! Thanks! So perfect! My custom fixed header needed to be in an absolute position so that my jquery toggle script would work correctly, and so I total overlap. Could have pushed the page container down with CSS but then it always goes wonky with screen size change.
Hi Rebecca,
I’m so happy to hear you found this!
Thanks for the code works great but now I’m having an issue when I resize the page a gap forms between header and the body. How would you make it more adaptive. Would I need to/be able to add $(window).resize(function() to your jQuery, and how would I go about doing that.
Hi Kris,
I personally wouldn’t worry about it too much, I don’t think users will be resizing their page. But you could certainly modify the code if you desire.
Hi Nelson!
I have the same problem with my global footers. Even if they are not fixed to the bottom (not sticky, not fixed, they are just there because I have enough content to fill the vh), they are overlapping the content of the page.
That’s the solution the Divi team gave me:
#main-content div#content {
min-height:90vh;
}
It’s better than adding an empty section, especially as I feel this section is not “used” on mobile. That one might work, as it adds by default 10vh as bottom-margin. However, it’s maybe a bit unpredictable sometimes, so I better like your dynamic solution for that.
If I’d kind of “translate” your solution to the footer, would this work? Also if the footer is not sticky?
And… is this approach correct?
<script>
jQuery(document).ready(function(){
var totalheight = 0;
jQuery(“.et-l–footer .et_builder_inner_content .et_pb_section”).each(function(){
totalheight = totalheight + jQuery(this).outerHeight();
});
totalheight = totalheight + “px”;
jQuery(“#et-main-area”).css(“padding-bottom”,totalheight);
});
</script>
Have an awesome day!
Katrin
Hi Katrin,
I haven’t looked at this closely, but remember you are using “MIN” height, not height. So the 90 is just a minimum, and anything taller would go more.
If you tried this and have it working feel free to share!
Nice one – I’ve used quite a few of your tutorials now and they always seem to arrive right on time when I need a fix for something I’m working on 🙂 Thank you.
We are glad that our guides are helping you to fix the issues. 🙂
Hi Nelson, great tutorial. I can´t get this to work. I have followed the tutorial step by step.
I think the reason is that I have renamed the CSS-class to ´pa-header´ (as instructed in your shrinking header tutorial: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-shrink-the-divi-header-menu-when-scrolling/ ).
Can I change the jQuery script in some way to make it fit?
URL to my test server: https://wordpress-469883-1950685.cloudwaysapps.com/
Hi Bjorn,
The jQuery code present in the guide is independent of any Custom Class given as it uses the classes that are present by default so the pa-header class should not affect the results. I have checked the code on the website using the inspector tool and it is working fine on my end. Please make sure that you have placed the code at the right place and if the code is placed properly then please try using a different browser or device and see if that helps.
Let us know how it goes. 🙂
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?
You are amazing, this solved my problem. I did notice when I used the first code it left a 10px space above my page content. But, using the additional line of CSS you provided I set margin-top to -10px and that fixed the problem. Thanks again.
Thank you for all of you creative solutions!
I am also using you shrinking logo header CSS. All was working great, except for the overlap, so I tried to apply this fix using the code snippet above. However it causes a white space beneath the header on my pages now.
Link: https://tymnu11.sg-host.com/
Hi Tymn,
If I am using the code from the guide on your website than I am getting the accurate results so there is no issue with the code. Could you please check if the code is properly placed or not on your end?
Works great when viewing the page but doesn’t seem to work when using the visual builder – my header overlaps the top modules making it impossible to edit. Any Ideas / css to add to push content down when logged in and in visual builder?
Nope, JavaScript won’t work in the Visual Builder 🙂
Like @John Stavola, the header overlapping the content in the Visual Builder makes the edition impossible and a nightmare.
I understand javascript won’t work in the visual builder, but any tricks to workaround this crazy issue. Elegant Themes has many post on how to use a fixed header but nothing about this flaw.
Your fix here should be pushed into the Divi theme core since who would want their content to disappear behind when using a fixed header?! I will get in touch with them on the topic.
Any workaround would be appreciated though! Thanks a million for your website full of necessary ressources for Divi!
Hello and thank you for the great tutorials. I suddenly had the same issue with the newest Divi update of my header overlapping my sections. I used both of your code suggestions, and it has resolved the issue on mobile devices. However on desktops, there is a space between the header and the section that I have been unable to resolve. My website has a lot of content so a site-wide fix would be lovely.
As another person mentioned, this space doesn’t show up in the visual builder, and indeed the header overlaps the modules so that they are impossible to edit. This hasn’t been an issue until now. Do you have any idea how to resolve this?
Thank you for any help. https://www.noteworthymusic.org/
Hey Bambi,
I have thoroughly investigated the website and I am not able to find the white space at the top as you have mentioned in your comment. Could you please check the website in incognito or in a different browser and see if the issue is still there?
Let me know how it goes.
Hi,
I have added this snippet to one of my sites and it is still overlapping.
I am on WordPress 5.9 with the latest build of Divi.
I simply can’t seem to get it to work. The header constantly overlaps the first image.
Thanks
Hey Rick,
I am afraid, I cannot replicate the issue that you are facing. Could you please try using a different browser and see if that helps?
I just added a section as a spacer set to the same height as my header under it in the theme builder for the global header (it should be transparent). I then set it’s “ZINDEX TO 0”. It just slips behind and pushes the sections in the builder back down so it all lines up.
this is exactly what I need, however I am not using a custom global header – just the default fixed header in Divi. I have pasted the code into the integrations correct spot but it is not working. Please advise can thi swork wha n I am not using a custom global header – just the default?
Hey Helen,
The URL you provided is coming under construction so could you please remove the plugin that you are using so that I can check and resolve the issue?
Hello,
This solutions seems to work for a standard page, but is causing a white gap below my header on my home page. Any idea what’s causing this?
https://e87.ea4.myftpupload.com/
Thanks!
Hey Alex,
I have checked the URL and I am not able to spot the issue mentioned on the website.
Hi Nelson,
First, thanks for your great tutorials!
I’ve used the JQuery Code from https://wordpress-292293-1617718.cloudwaysapps.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!
Hey Nelson
Here’s a thought for you. I have a fixed, shrinking header, but the navigation jump links down the page. So the header shrinks but my links anchor to the content sections and still leaves a gap.
How do I contend with the gap, when the page scrolls to a jump link on the same page?
I have shared the Vidyard link of the issue below.
Hi Glen!
Could you please share the URL of the website? It will help me to understand the issue better.
Hi Nelson, awesome tutorial thank you.
I have a small issue on mobile, where my jump links land short exactly the same height as the header.
All works perfectly on desktop.
Any ideas:
https://kuoda.uk/home-page/
Sorry for the delay, I see it is perfect on your site.
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.
In some cases you may want exactly the opposite effect (move menu up to overlap hero or body section of page). In this case I just changed the plus symbol “+” line 5 of code and also changed line 8 to “margin-top” instead of “padding-top”.
Worked nicely.
Thanks again Nelson for this great tip.
Thanks for sharing!
Would you happen to know why sometimes the code applies a padding-top larger than the actual height of the header? This is something I desperately need but can’t seem to get it to work right. If I refresh a page numerous times, sometimes it works as intended and other times it just adds extra padding top space.
Hi Alex!
Could you please share the URL of the website? It will help me to understand the issue better.
I need the code on every page except one, and it’s an archive page controlled by a plugin–not a regular page. For some reason, it’s putting a huge amount of blank space between the header and the page content. How do I keep the code from affecting that particular page?
Hi Jon!
You can try adding the following code in this case:
jQuery(document).ready(function(){
var totalheight = 0;
jQuery(“body:not(.page-id-3827) .et-l–header .et_builder_inner_content .et_pb_section”).each(function(){
totalheight = totalheight + jQuery(this).outerHeight();
});
totalheight = totalheight + “px”;
jQuery(“body:not(.page-id-3827) #et-main-area”).css(“padding-top”,totalheight);
});
You can add the page-id in the body tag by inspecting the page.
Let me know how it goes!
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.
Hey,
my header (menu) is still overlapping the content of my page, but not on all pages. At the HOME its fine, on the others its not working. May you have a solution for this.
Thanks mate!
Hi Bjorn!
You can check the margin on the top section of the pages. If you have any negative margin, then remove it. Else, share the URL of the page to investigate further.
Hi there,
Thank so much for this tutorial. I have used it successfully many times before.
For some reason on a new site I’m working on it pushes the content of the page too far down a lot of the time.
Something the content is pushed down about an extra 100px and then other time it is pushed down by an extra 770px.
I’ve tried clearing the cache and the viewing it in an incognito browser but the larger gap still appears eventually as I click through the pages.
I tried using the css #et-main-area {padding-top: 0px!important;}, but that just undoes the work of the script altogether.
Here is the link to the site: https://eventcommsagency.com/ea-staging/
I would greatly appreciate any advice. Thank you 😊
Hi Amy!
I have checked the page and not able to replicate the issue. Is the problem resolved? If it persists on your end, then try disable the cache plugin and check again.
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!
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?