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.
Thanks a million!
Hi,
Thank you for trying to fix for us! In my case it still doesn’t work. I know that this refers to the jumping header(s), but with my website (www.aditanase.com) looks more like the content jumps over the header.
It’s either me misunderstanding or the problems is completely different to what you are trying to fix with this post and video.
Best wishes,
yes, yours is a different issue and not one i have seen before actually.
I had the same/similar issue.
Experiment with padding for the .et_pb_section div. It’s similar to the jumping header fix except set the top: 0; and padding-top to what works with your layout. In my case it was….
.et_pb_section {
top: 0px !important;
padding-top: 120px !important;
}
thank you sooooo much
Edward – this worked for me, although I had to play with image position settings and bottom padding. I had spent days trying lots of different fixes and nothing worked until now. Excellent, thank you.
Thanks for this – not quite working for me for some reason!
(By the way, that gif advert on the right for 80 themes is horrible when you are trying to read through your screenshot…any way of just looping it twice?)
Cheers
Thanks for the tips, but it doesn’t work for me. It leaves a gap above the fixed header on scroll down, so that the page scrolls underneath the header visibly. This is the only solution that worked for me: https://elegantmarketplace.com/downloads/the-ultimate-jumping-header-fix/
It’s donation-ware. It works!
Does this work for sites built with Elementor as well?
I doubt it…
Thanks for sharing with very detailed steps. Works well!
Thanks. glad it still works. I actually thought this had been fixed in theme already… guess not!