Divi has an infamous jumping header that shifts up slightly as the page is loading.
In this quick step-by-step tutorial, I will show you how to fix the jumping header issue in Divi with a few lines of CSS.
What is the Divi jumping header?
When a Divi web page is loading, there may be a gap between the top of the page and the header. Once the page is fully loaded the gap will disappear and the header will jump to the top of the page. The result is an ugly and annoying shift of the page layout that your users will hate.
The jumping header in Divi is caused by the Javascript values loading after the CSS values for the padding-top value of the header. The problem is more noticeable on slow loading websites and on fast loading websites may not be noticeable at all.
How to fix the Divi jumping header in 3 quick steps
If your website is suffering from the infamous header jump you can follow the three steps below to remove any layout shift from your Divi website. Each website may need a slightly different number in the code so read each step and ensure you are adding the correct CSS code.
Step 1 – Inspect element to find the Divi header heights
You will need to use the inspect element tool to find the specific heights needed to work with your website.
- Hover over your header and right-click the mouse. In the dropdown menu that appears, select the inspect element menu item
- Look at the code in the Elements window and find the line of code that starts with <div id=”page-container”… >
- Find the value in this code section that shows the padding-top value in pixels (px).
- Remember this px value!
Step 2 – Add your custom CSS to Divi
Once you have the pixel value for the padding-top from step 1 above you will need to add some custom CSS to your Divi website. You can add the CSS code to your custom CSS area in the Divi Theme Options or into your child themes style.css file.
- In your WordPress dashboard go to Divi >Theme Options and scroll all the way to the bottom of the page to the Custom CSS box.
- Add the following CSS code
@media screen and (min-width: 981px) { #page-container { top: 82px !important; padding-top: 82px !important; } }
- Save the changes
Step 3 – Clear your website cache
Once you have added the CSS to your website you may not see the changes due to caching. Your server, browser, and other places can save copies of your website files, so any updates you make may not be seen until those cached files are replaced.
Your website CSS files can get cached in a few different places so make sure to check each possible location if you are not seeing the jumping header fixed.
For my website I had to access the following cached areas;
- Cloudflare
- Siteground Supercacher
- Divi Nitro plugin cache
- My laptop browser cache
Watch the jumping header fix video
If you prefer to watch how I fixed the jumping header on my website then here is the full tutorial explained on YouTube.
Final thoughts on the jumping header in Divi
The tutorial from SJ James (originally posted way back in September 2015!) popped up 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). Unfortunately, this didn’t work, so it was back to Google. After a lot of searching and tweaking CSS, I finally found the code to stop my header from jumping all over the place!
The jumping header is ugly and annoying for any Divi website user and something that needs to be fixed. Luckily the solution to a jumping header is a few lines of custom CSS. 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!
Fix for newest version of Divi: Find sticky module in div that appears when sticky header engages. You will notice a “top: XXpx”. That is the culprit. Copy the css selector for that element.
My solution looked like this:
div.et_pb_section_0_tb_header:nth-child(1) {
top: 0!important;
}
If you have noticed that the headers don’t jump in Chrome, it is because Chrome has a built in feature that fixes jumping elements. https://www.theverge.com/2017/4/11/15260994/google-chrome-update-fixes-page-jumps-scroll-anchoring
10 hours of my time wasted on this. My pain is your gain.