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

See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles