Fix the Divi jumping header on Divi Theme Examples

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.

1. Hover over your header and right-click the mouse. In the dropdown menu that appears, select the inspect element menu item
2. Look at the code in the Elements window and find the line of code that starts with <div id=”page-container”… >
3. Find the value in this code section that shows the padding-top value in pixels (px).
4. 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.

1. 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.
2. Add the following CSS code

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

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