Make Header Static On Page Until It Becomes Fixed

If you’ve ever used the transparent header feature in Divi (or want the header to just not move on the page), it sometimes looks weird to have it scroll and drag over your content until it gets “fixed header” status and gets a background color.

This code will make it static on the page until it gets “fixed header” status and also stops it from animating.

Note: you might want to check the CSS @media min-width to make sure it works for your website.

@media (min-width: 981px) {
#main-header:not(.et-fixed-header), #top-header:not(.et-fixed-header) {
position: absolute; /* prevents the header from moving until it is fixed */
}
	
.et_fixed_nav #et-top-navigation, #top-menu a {
-webkit-transition: none!important;
-moz-transition: none!important;
transition: none!important; /* prevents the header from animating */
}
}