When styling your Divi header via the Theme Customizer, Divi assigns CSS to both your page-container and main-header ID. This CSS is then injected using Javascript which is what causes the Divi jumping header.

Your browser will render CSS before it renders Javascript, so the trick to get this fixed is to make whatever changes you want to the header, then inspect the elements using the Developer tools of whichever browser you are using. You will need to locate both the above CSS IDs and check what padding is being injected with Javascript, then add these directly to your stylesheet and voilá! Your jumping header issue is gone!

My example below was from my own site, but it is so that you see what your CSS should look like when you add it to your stylesheet.

#page-container { padding-top:99px !important; }
#main-header { top: 31px !important; }

Credit goes to SJ of Divi Space who initially wrote the fix for this and Alex of Unforge Web Design who reminded me of the existence of this fix.

Note: Since writing this article, the above fix no longer works, in particular with the latest version of Divi. I will attempt to work on an updated fix when time allows.

Was this article helpful?