How To Fix Divi Jumping Header

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

Sometimes people get the jumping header issue mistaken by the flashing content issue in Divi.

If all your content flashes with unstyled content then you can follow my tutorial on how to fix Divi flashing on page load.

The fix for the jumping header is pretty easy. But first I will explain what causes the jumping header.

What Causes The Jumping Header In Divi?

The jumping header in Divi is caused when you apply styles in the theme customizer to the primary header.

For example, I changed the header height to 100px.

Theme customizer in Divi

When you make a change in the Customizer then Divi will apply some CSS for these changes.

To do this Divi will use Javascript and apply those CSS styles via style attributes.

The problem with this is that CSS gets loaded in before the Javascript with the style attributes. And this is causing the jumping header.

How To Fix The Jumping Header In Divi

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.

Now it will be loaded right away and you will not see a jumping header.

Step 1: Find the style attributes

You can find the page attributes by opening your Chrome developers tool. Right-click on your header and open the inspector tool.

Go to the main-header section of your code and you will notice that your header gets highlighted.

Find the page attributes in Div

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.

Step 2: Add the CSS

Now we need to add a little CSS snippet to the site. If you are working with a child theme 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

Place the following snippet:

#page-container {
padding-top: 114px !important;
}

#main-header {
top: 32px !important;
}

Change the values with yours.

And that should fix your jumping header issue in Divi. If you have any questions please let me know in the comments.

You Might Also Likeā€¦

1 thought on “How To Fix Divi Jumping Header”

  1. I have been looking for a solution for Jumping Header several times. (With a sticky header)
    The example you give here does not work for me.

    I have in the Custom CSS Main Element margin-top: -1px! Important;

    This works well for my website no longer bothered by a jumping header
    https:/emaillekunst.nl

    Reply

Leave a Comment

0 Shares
Share
Pin
Tweet