Fixing the ‘jumping header’ issue in Divi.

Fixing the ‘jumping header’ issue in Divi.

What’s the one pain that every Divi user shares? That’s right, the jumping header. If you don’t know what I’m referring to here then you are the chosen one and I’d appreciate you leaving your contact information in the comments.

Here’s why it happens;

The Customizer – A great tool, but not a perfect one.

When you make changes to the appearance of your site with the customizer, Divi has to add those changes with CSS so that the browser can take them into account. The problem is, for each of us those settings are going to be different, depending on which options we set in the customizer.

Divi uses javascript to add these styles via style attributes in the html. As you can see in this image…

The trouble is, the page starts to load the style sheet before these attributes are applied, which is what causes the jump.

So how do we fix it?

Well we can see from the inspect element image above what Divi is trying to do. We can help it along by copying these styles into our own style sheet.

If you think of Divi trying to load in two stages –

1. Without the style attributes in the html.

2. With the style attributes in the html.

By copying the styles into our own CSS we make it load that way on the initial page load and the jump goes bye bye.

So we look for whichever html element the style is being applied to and the style being applied to it and write it to our style sheets.

The above example would look like so;

#page-container {
padding-top: 196px;
}

#main-header {
top: 41px;
}

If you still see a jump, be sure to thoroughly check you have gone through the html with the inspect element tool and have copied all of the style attributes.

In theory, you shouldn’t need the !important tag as you are essentially creating CSS that is the same as the inline styles, so even if it overrode your CSS, nothing would change. However in testing, some occasions did require the !important tag so try it without first and then with.

With would look like..

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

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

Obviously, your own selectors, properties and values will be different, depending on the settings you have used in the customizer.

If you use this fix and it works (oh my god it works!!) then let us know in the comments. 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.