How to Fix The Jumping Header Issue Divi Builder

This has been an issue with Divi Builder ever since I can remember. On page-load, you may notice the jumping header issue caused by a few code inconsistencies. For the record, I use the Divi Builder for just about every website I build. The jumping header issue is only a small snafu that can be easily corrected.

The real issue is caused by the style sheet loading first, and then the inline CSS is applied shortly after. The delay in the loading time creates the jump illusion.

Here is a quick tutorial on how to fix the jumping header issue in the Divi Builder:

1. Use an inspector software or the Firebox Developer tools inspector to locate the following items within the Divi page elements. See image below.

2. Add the following CSS code under Customize >> CSS to match the #page-container: style=”padding-top:152px;” and #main-header: style=”top:50px;”.


#main-header {
top: 50px !important;
}
#page-container {
padding-top: 152px !important;
}


It is important to note that the values will be different for your website, and you need to change them to match. If the issue persists with the Divi header jumping, try adding a fade animation to the entire header. You may have another type of loading issue that can be eliminated by adding an animation.