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ā€¦

7 thoughts 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
  2. Divi uses JS to correct layout all the way, e.g. when using centered logos or defining different styles for different viewport. Not smart. Regarding above the fold content you should notice the adjustments made by JS by comparing the before and after state of HTML and CSS. Then add missing HTML and/or CSS by appropriate means.

    E.g. when using the blog module the jump is very ugly since Divi is literally building the layout with JS. But the described way above works even in those harder cases.

    What you generally shouldn’t do is to apply any animations via Divi’s animation feature to elements above the fold. Makes your life uncessarily complicated while solving CWV issues.

    The best.

    Reply
    • Hi Frank,

      Thanks for this explanation.

      Yes, Divi’s animation above the fold often causes CWS issues, and those are hard to solve in Divi.

      Reply
  3. i did it!!! i fixed the jumping header!! for real, i tried so many many many times but always did it end in a dissapointment.
    this is awesome. maybe the solution is right or this one is the only i understand, anyway, thank you so much.

    Reply

Leave a Comment

0 Shares
Share
Pin
Tweet