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

30 Comments

  1. Lynn

    Oh thank goodness you made this page, and it came up first in my search! Phew – now I can get back to work building the rest of the site.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *