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>Related Post: Adding JavaScript / jQuery 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.
thank you
You're welcome, Alvin :)
Awesome! Searched for this for a while
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!
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!
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?
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.
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
Thanks for sharing your solution, Lukas :)
thanks
Thanks for the tip, I tried it already a dozen ways.
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.