Stop the Divi Header from Shrinking on Scroll
Here’s how to stop the Divi header from shrinking when you scroll down the page.
The Divi Theme header has a default scroll effect which sees it “shrink” to a more compact version as you scroll down the page. If you’d like to keep the header at full-size as you scroll down the page, you can do so using either of the two methods below.
Stopping the Header from Shrinking via the Customizer
Recent versions of the Divi Theme give you a way to achieve this effect without the need for code. Using Divi’s customizer settings, you can simply set the “primary menu bar” and “fixed navigation” to have the same height.
This can be done with the following customizer settings:
- Header & Navigation » Primary Menu Bar » Menu Height
- Header & Navigation » Fixed Navigation Settings » Fixed Menu Height
Stop the Header Shrinking on Scroll using JQuery
Here’s a method I came up with before it was possible to stop the shrinkage via the customizer. It may still prove useful in some circumstances so I’ll keep it up here. The solution is to add the following jQuery code to Divi:
The code works by overriding the jQuery addClass method. When Divi calls this class to apply the fixed header’s CSS class, we simply remove the class immediately. The result is that the fixed header isn’t applied. The last block just makes sure the class is cleared at page load too.
You can add this code via a single click in Divi Booster from 2.0.3 onwards.
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin