The Divi Theme's header shrinks to a more compact view as you start to scroll down the screen. Geno asked a question over on the Divi users group about whether it was possible to change the header shrinking effect to happen further down the page – e.g. a user would have to scroll down 500px before the header shrinks. Here's how to do it.
Shrink Header Further Down – Updated
Here is the jQuery code to make the header stay large, until the user has scrolled down by a certain number of pixels. In the code below this "offset" is set to 500 pixels, but you can easily change that to your desired scroll down amount.
<script>
jQuery(function($){
var offset = 500;
var $header = $('#main-header');
// Override the addClass to prevent fixed header class from being added before offset reached
var addclass = $.fn.addClass;
$.fn.addClass = function(){
var result = addclass.apply(this, arguments);
if ($(window).scrollTop() < offset) {
$header.removeClass('et-fixed-header');
}
return result;
}
// Remove fixed header class initially
$header.removeClass('et-fixed-header');
// Create waypoint which adds / removes fixed header class when offset reached
$('body').waypoint({
handler: function(d) {
$header.toggleClass('et-fixed-header',(d==='down'));
},
offset: -offset
});
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
Divi Booster includes an option to enable this functionality, with the updated code being available in v2.4.1 onwards.
The feature can be found on the Divi Booster settings page at "Header > Main Header > Don't shrink the header until user scrolls down by … px", and can be enabled simply by entering your scroll down amount in pixels, checking the box beside the feature, and saving the settings.
Shrink Header Further Down – The Old Way
It turns out that Divi uses the jQuery Waypoints plugin to trigger the shrinking effect. Basically the main header is registered as a "waypoint" and when the use scrolls past it a function is triggered which adds (or removes) the CSS class which defines the sticky header layout.
Normally the waypoint triggers when the top of the element is level with the top of the viewing area. However, the waypoint definition accepts an "offset" parameter which allows you to specify that the trigger happens when the top of the element is a certain number of pixels from the top of the viewport. A negative offset will cause the trigger to happen when the element has already scrolled past the top of the viewport by the specified amount.
It was possible to add a custom offset in the Divi Theme's custom.js file which achieved the desired effect. But was it possible to achieve the affect without modifying the theme files – i.e. with something we could place in a child theme?
As far as I can tell, the Waypoint API doesn't offer a way for modifying existing waypoints. The best I could do was to remove all waypoints from the header element (as far as I can tell it's the only waypoint), and create a new waypoint that works in the same way, but uses our custom waypoint.
Here's the jQuery to achieve this (just change the -500 to your required offset in pixels):
<script>
jQuery(function($) {
function update_header_waypoint() {
$('#main-content').waypoint('destroy');
$('body').waypoint({
offset: -500 - ($('#wpadminbar').length?$('#wpadminbar').innerHeight():0),
handler : function(d) {
$('#main-header').toggleClass('et-fixed-header',(d==='down'));
}
});
}
setTimeout(update_header_waypoint, 1000);
});
</script>The code waits until 1 second after the dom is loaded, to give Divi time to create the waypoint in the first place.
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin
Awesome! That worked to totally solve what for me was the opposite problem…I wanted the logo to vanish quicker :D
Thank you so much!
Nice one! Glad it helped, Allyson :)
Thank you!! I have been looking for a resolution for awhile. I can use this on several different sites. 🥳 ⭐️⭐️⭐️⭐️⭐️
You're very welcome, michelle!
Thanks a lot! Works great!!
Hi , i have an issue with the new jquery, DIVI say me at line 40 : < offset) {
The carracter must be escaped : <
Do you have a solution ? thanks !
Hi jimblug, if you're adding the jquery code via the Divi > Theme Options > Integrations tab (as it sounds like you are), you need to surround the jquery code in <script> tags. This is because the integrations boxes are expecting HTML – the <script> tags are needed to tell it to switch to javascript / jQuery mode.
While they're not technically part of the jquery code, I've just updated the code above to include the necessary tags. If you replace the code you've copied with what is now in the post, I think that should get rid of the error for you. I hope that helps!
This Divibooster setting doesn't seem to work in the most recent version of Divi (3.29.3). I am curious if you are experiencing the same.
I know it's parly working because if I set it to 0, the fixed header is there without scrolling.
I think I figured it out… I am using a custom template for the single post page and it is not recognizing the sections I've injected at the top of the page in its calculations.
Ah, okay. Thanks for the update, Brad. That could explain it. If you like, send through a link to one of these custom templated pages and I'll be happy to take a look and see if I can work out if there's something we can do to get it working. Thanks!
Thank you for sharing this solution :). I've been looking for a way to transition to a fixed header immediately upon scrolling and this has solved it really nicely, just reduced the var option.
The only issue I have with it is that the Menu items don't get centered as they did before upon scrolling since I'm using the header style where the logo is in the middle between the Menu items.
I have the logo disabled on a fixed header and the Menu items would fill up the middle nicely but now they stay on the sides. Do you maybe have a fix for that?
Thanks once again :).
Hi Srdan, thanks for pointing this out. You should be able to solve this by adding this CSS to your site:
body.et_hide_fixed_logo .et-fixed-header .centered-inline-logo-wrap { width: 0 !important; }Hope that helps!
Thank you for sharing this bit of code. This page was helpful for implementing it: https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/
You're very welcome :)