Web Design & Development

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 */
}
}

Need Help?

Tell us about your project!

  • Date Format: MM slash DD slash YYYY
Previous Post
Add Time, Date And Day Classes To Body Tag
Next Post
Force WooCommerce Orders To Auto Complete

Related Articles

Menu
Google Rating
5.0
Based on 54 reviews
×
Get a Quote