Fix the Divi jumping header on Divi Theme Examples

How do I stop my Divi header jumping?

Like many people using Divi, the header on my Divi site has been jumping on load for a while now. I did fix it when it 1st started which was a long, long time ago, but this Divi bug seems to have found it’s way back into my header. I had hoped that Elegant Themes would have got this long running issue fixed up in one of the many updates, but the time for waiting is over so top of the to-do list today was to re-look at getting this jumping header fixed.

The jumping header bug is really old so there are already a few solutions out there which may or may not still work. I have seen reports in various Facebook groups of fixes not working, so I did a quick Google search and see what comes up.

Testing the jumping header fixes

The tutorial from SJ James (originally posted way back in September 2015!) popped up number 1 in Google for “fix Divi jumping header” so this was the 1st fix I tried (and from memory was the one I implemented years ago). SJ has been in the Divi community for a long time and knows his stuff, so this was a good start. Unfortunately this didn’t work, so it was back to google. The next few were results were just copies of SJ’s original post, so I skipped those and went to a tutorial from Web Limited.

The fix that worked for me was…

The tutorial from tutorial from Web Limitless fixed my jumping header! However, in the tutorial it says that the main header and page-container height numbers should be the same, but for me they were not. I assume this is because i have the secondary menu active which adds to the overall height, so I just used the value of the padding-top on the page-container, which for me was 82px.

Step 1 – Inspect element to find header heights

You will need to use the inspect element tool (right click > inspect element) to find the specific heights needed to work with your site as seen below. Look for the line that start div is=”page-container”…
and then you need the value for padding-top.

Step 2 – Add CSS to Theme options or child theme

Once you have the 2 numbers from step 1 above, just edit into the following code and then add the CSS code to your custom CSS in Divi Theme options or into your child themes style.css

@media screen and (min-width: 981px) {
#page-container {
    top: 82px !important;
    padding-top: 82px !important;
}
}

(maby) Step 3 – Clear caches

CSS can get cached in a few different places so make sure you have cleared yours, or you may not see the new css when you visit your site. For me i had Cloudflare, WP Supercache, Divi Nitro and browser cach to clear…

Let the jumping header jump no more 🙂

Did this solution work for you? Let me know in the comments.

Watch the video of fixing Divi Theme Examples jumping header.