The Divi theme is one of the most versatile WordPress premium themes with tons of options that also comes together with its powerful page builder. However, in some cases, you want to make some customizations and you simply cannot find a quick fix for them. An example for that is the Divi menu animation. The header always shrinks on page dropdown and while some may argue that this gives a modern feel to your Divi website, this transition effect is certainly not for everyone. It could be that you prefer to have a traditional header with a simple menu bar that does not jump around or have any other animations. It could be that you have included a secondary menu to the top menu bar and it messes up with the whole header and the logo (that was the issue in my case). Whatever the reason, there seems to be no option to turn the header transition off, so here is what I did that worked for me after quite a lot of research.

How to Remove Divi Menu Transition on Page Dropdown

To remove the Divi header animation and make it stay the same , in your WordPress dashboard go to Divi -> Theme options -> Integration and place the following javascript code in the dark html box that says: ”Add code to the < head > of your blog”:

<script>
(function(){
    var addclass = jQuery.fn.addClass;
    jQuery.fn.addClass = function(){
        var result = addclass.apply(this, arguments);
		//Remove the 'et-fixed-header' class that is added to the top menu bar on scroll
        jQuery('#main-header').removeClass('et-fixed-header');
        return result;
    }
})();
jQuery(function($){
	//Remove the class on page load too
    $('#main-header').removeClass('et-fixed-header');
});
</script>
	

After that, click on the Save Changes button at the bottom of the page. Now reload the website and the header should finally stay fixed and should not shrink on page scroll.

Read more:

Source: https://divibooster.com/stop-the-divi-header-from-shrinking-on-scroll/