Stop the Divi Header from Shrinking on Scroll

Written by Dan Mossop

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.

Streamline Your Divi Workflow!

Enhance your Divi site efficiency by easily customizing your header settings directly within Divi. With Divi Booster, not only can you prevent the header shrink with a simple click, but you can also unlock hundreds of other features to create stunning websites effortlessly.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

41 Comments

  1. Thanks, this helped a lot ! :)

    Reply
  2. I cannot find "Header & Navigation » Primary Menu Bar » Menu Height"

    in the 3.0.34 version only there are inside "Primary Menu Bar"

    "Logo Max Height"
    "Menu Top Margin"
    "Text Size"
    "Letter Spacing"

    But aren't "Menu Height", what do you recommend me?

    Reply
    • How odd… on my 3.0.34 install there is a "Menu Height" setting, but no "Menu Top Margin" setting. I'm not sure why the difference, but it shouldn't matter. You should be able to get the primary menu bar to look the way you want by adjusting the "Logo Max Height" and "Menu Top Margin" settings. This will effectively set the height of the primary menu bar, which is normally just the logo's height plus the margin around it. You can then use the fixed menu height setting (or logo / top margin setting if that's what you have) to ensure that it looks the same as for the primary menu bar. It might take a bit of experimenting to get the heights to be the same, but I think the fixed menu height would probably need to be = logo height + 2 * top margin. Once their heights are matched, you shouldn't see any shrinking effect. Hope that helps!

      Reply
      • Ok, I've opted by apply your .js code to fix this and works fine, but maybe in a future I'll try your last suggestion,

        Thank you so much. :)

        Reply
  3. This may not have been possible when you first wrote this tip, but now you can set the Fixed Header height to the same value as the Primary Menu Bar (the setting is under Fixed Navigation Settings in the theme customizer). This will rpevent the fixed menu bar from shrinking on scroll without resorting to code.

    Reply
    • Hi Damian, thanks for the comment. Yeah this tip pre-dates that option. The code given is still probably useful in some circumstances (such as where you are creating a child theme to be reused on multiple sites), but for a single site I think the method you mention is would be preferable. I've updated the post to reflect this. Cheers!

      Reply
  4. Hi Dan, this is probably a very basic question: where do I copy this code in? Thanks

    Reply
  5. Thank you so much – this helped me quite a lot! Works wonderfully.

    Reply
  6. I love working with a theme like Divi because of articles like this. You saved me at least an hour of development time. Thanks Dan!!!

    Reply
    • You're very welcome, Noah!

      Reply
      • I'm thinking of buying Divi Booster for this feature alone but will it still be functional with Divi 3.0?

        Reply
        • Hi Jaz. Yes, this is still working with Divi 3.0 – I just tested it against the latest version and all seems well.

          Reply
  7. For some reason it doesnt work in my site. I can change whatever i want in the footer.php of my page, nothing of that is applied. As if another footer is inclueded and im in the wrong file. But im in the file of the divi theme and thats the one thast active.

    Any ideas?

    Reply
    • Im wrong…it works in all but the frontpage. On the sub pages all is fine. Why?

      Reply
    • Ok, forget it sorry :-)

      Dont know what was it but its working now… cache probably.

      Reply
  8. This works great; however, it seems to stop all other animations from happening. For example, the slider doesn't change slides and the buttons don't show up when I rollover the slider area like they use to. Is there a work around for this?

    Thanks,
    Cass

    Reply
    • Hi Cass, it sounds a lot like there is a JavaScript error somewhere on the page. Are you able to give me a link to the page to take a look?

      By the way, I've just updated the code in this post to fix an issue where the header would shrink if you reload a page while already scrolled part of the way down.

      Reply
      • I am having a similar issue. I just implemented this and it worked for the shrinking header; however, all of my images on the page are gone and there are no animations:

        Please help!!

        Reply
        • Hi Lulu, I've just seen your message that this seems to have been due to a WordPress update. I'm glad things are working again.

          Reply
  9. Thanks I have been fighting this for an hour. Works great in the footer of my child theme.

    Reply
  10. Hi, Dan.

    Thank you for sharing your code, I really appreciate it :-)

    I'm sorry if this is a silly question, but where do I find footer.js? Do I have to create it? I'm using a Divi child theme, and I've tried pasting your code into the relevant section of epanel, but nothing happens.

    I'd be grateful if you could steer me onto the path of righteousness!

    Cheers!

    Reply
    • Ah, very sorry. That should have been "footer.php". I've updated the post to correct it.

      Reply
      • Thanks, Dan.

        That works a treat :-)

        Reply
  11. Hi, thank you Dan !

    Just to share my experience :

    cat /wp-content/themes/mychildtheme/functions.php

    <?php
    function override_parent() {
    add_action('wp_enqueue_scripts','override_js');
    }
    add_action ('after_setup_theme','override_parent');
    function override_js() {
    $template_dir = get_template_directory_uri();
    $theme_version = et_get_theme_version();
    wp_enqueue_script( 'divi-myscript-script', $template_dir . '/../mychildtheme/js/stopshrinking.js', array( 'jquery' ), $theme_version, true );
    }

    cat /wp-content/themes/mychildtheme/js/stopshrinking.js

    jQuery(function($){
    $(window).load(function(){
    $('#main-content').waypoint('destroy');
    });
    });

    It is not top clean ;) but this is working too with these lines at the end of /wp-content/themes/mychildtheme/footer.php :

    et voilà :)

    Reply
    • Thanks for sharing that, Frank :)

      Reply
      • @Franck-AWO,

        Thanks! I think this is the right approach. (You can still have the fixed-position header, but without the resizing on scroll.) This should really just be a setting that you can turn on/off, but ah well.

        In case this helps others… I couldn't get the script to load with the 'after_setup_theme' hook that you used for whatever reason, but just enqueuing the script like this worked fine:

        function override_js() {
        $theme_version = et_get_theme_version();
        wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), $theme_version, true );
        }
        add_action('wp_enqueue_scripts','override_js');

        Reply
        • Thanks platypusman. One thing to note is that while this works with Divi 2.5 and earlier, it doesn't work properly in Divi 2.6. It looks like it is working, but what really happens is that it triggers a JavaScript error which prevents Divi's code for shrinking the header from running. That would be okay, except that the JavaScript error may also break other things, such as image slide in effects, so may not be what you want.

          I updated the post for Divi 2.6 with a new way of doing it (overriding the jQuery addClass method). Fortunately this still lets you have the fixed-position header (which is controlled by another class), but prevent the shrinking (normally controlled by the removed class). I'd suggest doing it this way if you are going to be using the code with Divi 2.6 otherwise you might find random parts of your site stop working correctly…

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

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Enable Automatic Looping for YouTube Videos in the Divi Video Module

Enabling automatic looping for YouTube videos in your Divi video module ensures that content plays seamlessly and continuously without interruption. This feature can enhance user engagement, highlight key information, or create dynamic visual effects on your website....

Hide Video Controls in Divi Video Module

Disabling YouTube video controls in the Divi Video Module helps create a seamless, distraction-free viewing experience for your site visitors. This approach is useful when you want full control over how your video content appears and is interacted with on the page, or...

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Autoplay Videos in Divi Video Module

Enabling videos in your Divi video module to start playing automatically can enhance both the site's design and user engagement. To ensure full compatibility with browser requirements, such as Chrome's autoplay policy, it's often necessary to start your videos muted...

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Random Divi Posts