Stop the Divi Header from Shrinking on Scroll

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:

<script>
(function(){
    // Override the addClass to prevent fixed header class from being added
    var addclass = jQuery.fn.addClass;
    jQuery.fn.addClass = function(){
        var result = addclass.apply(this, arguments);
            jQuery('#main-header').removeClass('et-fixed-header');
        return result;
    }
})();
jQuery(function($){
    $('#main-header').removeClass('et-fixed-header');
});
</script>

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.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

41 Comments

  1. thank you

    Reply
    • You're welcome, Alvin :)

      Reply
  2. Awesome! Searched for this for a while

    Reply
  3. Thank you so much for this solution!! My primary menu bar and centered-in line logo kept moving up on scroll: basically the fixed navigation was not 'sticking'. I was going crazy trying to figure out how to make it fixed no matter the scroll action.

    I implemented your solution but then it left a space below the menu bar and above the section below it when the site finished loading. ?? Not sure why.

    So I had to implement some custom CSS that reduced the margin by -23px between the menu bar and the section below it. Now it works great! THANK YOU!

    Reply
    • You're welcome, Leonita! I'm not sure what would have been causing the extra space, but I'm glad you found a workaround. If you have any more problems with it, let me know. Thanks!

      Reply
  4. I'm looking for an opposite version of this…to shrink to the fixed nav sooner to avoid crashing into content (centered logo)…any ideas?

    Reply
    • Hi Marna, I've got another post that I think will do what you need:

      https://divibooster.com/making-the-divi-header-shrink-further-down-the-page/

      Set the "offset" to "1" and it the header should shrink as soon as you scroll down even slightly.

      Note: I've just noticed that the code in that post doesn't properly account for the presence of the admin bar, which becomes noticeable when the offset is very small. To see what your users will see, visit the site when logged out – this should have the correct behavior. If you're logged in, the header will still shrink, just not until you scroll down a little further (by the height of the admin bar itself, I think). I'll try to correct that.

      Reply
  5. Another solutions would be to put this into your stylesheet:

    .et_header_style_left .et-fixed-header #et-top-navigation,
    .et_header_style_split .et-fixed-header #et-top-navigation {
    padding-top: 33px;
    }

    .et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a,
    .et_header_style_split .et-fixed-header #et-top-navigation nav > ul > li > a {
    padding-bottom: 33px;
    }

    Cheers
    Lukas

    Reply
    • Thanks for sharing your solution, Lukas :)

      Reply
  6. thanks

    Reply
  7. Thanks for the tip, I tried it already a dozen ways.

    Reply
  8. 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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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