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

Nelson Miller Pee Aye Creative
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 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;
}
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

128 Comments

  1. Victor

    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.

    Reply
  2. Stephen Vaughan

    Thanks Nelson…much appreciated.

    Reply
  3. Daniel

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
      • MF Main

        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?

    • Tommy Oddo

      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);

      Reply
  4. Nancy Mikyska

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  5. Morten Nielsen

    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.

    Reply
      • Nelson Lee Miller (aka The Divi Teacher)

        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;}

      • 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

        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..

  6. Nelson Lee Miller (aka The Divi Teacher)

    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;

    Reply
  7. Gabriel Zambrano

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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 🙂

      Reply
      • Shawn

        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

      • Hemant Gaba

        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. 🙂

  8. jojo

    thanks for the tips, it helped me

    Reply
  9. Chris Bittner

    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

    Reply
      • Chris Bittner

        I found a workaround. Thanks

    • Casey Bean

      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/

      Reply
      • Hemant Gaba

        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?

  10. Nicolas

    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

    Reply
  11. Linsey

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  12. Stefania Cocomazzi

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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?

      Reply
      • 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.

      • Nelson Lee Miller (aka The Divi Teacher)

        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.

      • 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 🙂

      • Nelson Lee Miller (aka The Divi Teacher)

        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.

      • Breeno

        Thanks for the reply Nelson

  13. John

    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!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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 🙂

      Reply
  14. Erik Haagensen

    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

    Reply
  15. Craig Evans

    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

    Reply
      • 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.

  16. Rob

    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?

    Reply
  17. wakowrz

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

    Reply
  18. Kelvin

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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?

      Reply
      • 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.

  19. Cyndi

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

    Reply
  20. Dafydd Davies

    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.

    Reply
      • 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.

  21. Maurizio

    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

    Reply
  22. Chris Bittner

    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???

    Reply
  23. theCreativeMind

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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 😉

      Reply
  24. Leslie

    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.

    Reply
  25. Darsheel Savla

    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?

    Reply
  26. Victoria

    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?

    Reply
      • 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.

      • Victoria

        The bottom of the page looks like this

  27. Rebecca

    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.

    Reply
  28. Kris

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  29. Katrin Zahnweh

    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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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!

      Reply
  30. Neil

    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.

    Reply
    • Hemant Gaba

      We are glad that our guides are helping you to fix the issues. 🙂

      Reply
    • Hemant Gaba

      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. 🙂

      Reply
  31. Nancy Mikyska

    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.

    Reply
    • Hemant Gaba

      Could you please share the URL of the website where you are facing that issue for me to investigate further?

      Reply
  32. Brian

    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.

    Reply
  33. Tymn Urban

    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/

    Reply
    • Hemant Gaba

      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?

      Reply
  34. John Stavola

    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?

    Reply
      • Marc

        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!

  35. Bambi Grinder

    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/

    Reply
    • Hemant Gaba

      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.

      Reply
  36. Rick

    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

    Reply
    • Hemant Gaba

      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?

      Reply
  37. Michael

    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.

    Reply
  38. Helen

    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?

    Reply
    • Hemant Gaba

      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?

      Reply
    • Hemant Gaba

      Hey Alex,

      I have checked the URL and I am not able to spot the issue mentioned on the website.

      Reply
  39. Noor Knaan

    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!

    Reply
    • Hemant Gaba

      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?

      Reply
      • Noor Knaan

        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!

  40. Glen Saxton

    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.

    Reply
    • Hemant Gaba

      Hi Glen!

      Could you please share the URL of the website? It will help me to understand the issue better.

      Reply
  41. Glen S

    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/

    Reply
  42. Guillaume

    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.

    Reply
    • Hemant Gaba

      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.

      Reply
  43. Walter

    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.

    Reply
  44. Alex

    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.

    Reply
    • Hemant Gaba

      Hi Alex!

      Could you please share the URL of the website? It will help me to understand the issue better.

      Reply
  45. Jon

    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?

    Reply
    • Hemant Gaba

      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!

      Reply
  46. Lien Verbeeck

    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

    Reply
    • Hemant Gaba

      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.

      Reply
  47. Björn

    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!

    Reply
    • Hemant Gaba

      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.

      Reply
  48. Amy McMahon

    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 😊

    Reply
    • Hemant Gaba

      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.

      Reply
  49. Nicole Denton

    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!

    Reply
    • Hemant Gaba

      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?

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart