{"id":24388,"date":"2021-03-06T14:54:16","date_gmt":"2021-03-06T13:54:16","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=24388"},"modified":"2021-04-15T11:48:59","modified_gmt":"2021-04-15T09:48:59","slug":"how-to-fix-divi-jumping-header","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-fix-divi-jumping-header\/","title":{"rendered":"How To Fix Divi Jumping Header"},"content":{"rendered":"\n

The jumping header in Divi is a well-known issue. This happens on a page load and is very ignoring and can also cause CLS<\/a> issues.<\/p>\n\n\n\n

Sometimes people get the jumping header issue mistaken by the flashing content issue in Divi.<\/p>\n\n\n\n

If all your content flashes with unstyled content then you can follow my tutorial on how to fix Divi flashing on page load<\/a>.<\/p>\n\n\n\n

The fix for the jumping header is pretty easy. But first I will explain what causes the jumping header.<\/p>\n\n\n\n

What Causes The Jumping Header In Divi?<\/h2>\n\n\n\n

The jumping header in Divi is caused when you apply styles in the theme customizer to the primary header.<\/p>\n\n\n\n

For example, I changed the header height to 100px.<\/p>\n\n\n\n

\"Theme<\/figure><\/div>\n\n\n\n

When you make a change in the Customizer then Divi will apply some CSS for these changes.<\/p>\n\n\n\n

To do this Divi will use Javascript and apply those CSS styles via style attributes.<\/p>\n\n\n\n

The problem with this is that CSS gets loaded in before the Javascript with the style attributes. And this is causing the jumping header.<\/p>\n\n\n\n

How To Fix The Jumping Header In Divi<\/h2>\n\n\n\n

The fix for the jumping header is quite easy. What we are going to do is to copy the style attribute values and place them in the CSS.<\/p>\n\n\n\n

Now it will be loaded right away and you will not see a jumping header.<\/p>\n\n\n\n

Step 1: Find the style attributes<\/h3>\n\n\n\n

You can find the page attributes by opening your Chrome developers tool. Right-click on your header and open the inspector tool.<\/p>\n\n\n\n

Go to the main-header section of your code and you will notice that your header gets highlighted.<\/p>\n\n\n\n

\"Find<\/figure><\/div>\n\n\n\n

You need to write down the 2 values where the arrows are on the image. The Padding-top and the top value. In my case that will be 114px and 32px.<\/p>\n\n\n\n

Step 2: Add the CSS<\/h3>\n\n\n\n

Now we need to add a little CSS snippet to the site. If you are working with a child theme<\/a> then you can place that in your child theme CSS file. If you are not using a child theme then you can go to Divi > Theme Options > CSS<\/p>\n\n\n\n

Place the following snippet:<\/p>\n\n\n\n

#page-container {\npadding-top: 114px !important;\n}\n\n#main-header {\ntop: 32px !important;\n}<\/code><\/pre>\n\n\n\n
Change the values with yours.<\/p>\n\n\n\n
And that should fix your jumping header issue in Divi. If you have any questions please let me know in the comments.<\/p>\n\n\n\n
You Might Also Like\u2026<\/h3>\n\n\n\n