The Divi Theme's header shrinks to a more compact view as you start to scroll down the screen. If you'd like to delay the header shrinking effect, so that it happens further down the page (e.g. so that the user would have to scroll down, say, 500px before the header shrinks), here's how to do it.
Shrink the Divi header further down the page using Divi Booster
Divi Booster includes an option to allow you to control how far down the page the user needs to scroll before the main Divi header shrinks.
The feature can be found on the main Divi Booster settings page at:
Divi > Divi Booster > Header > Main Header > Don't shrink the header until user scrolls down…
It can be enabled simply by entering your scroll down amount in pixels, checking the box beside the feature, and saving the settings, e.g.:
This feature is available in Divi Booster v2.4.1 onwards
Shrink the Divi header further down the page using jQuery
Alternatively, some custom jQuery code can be used to achieve this and 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.
Shrink a custom Divi Theme Builder Header further down the page
The solutions above are designed to work with the default Divi header only. They work by changing the scroll point at which Divi's own header shrinking effect is triggered. They don't actually add the ability to shrink the header itself.
In the case of custom headers added using the Divi Theme Builder, there is no built-in option to shrink the header when scrolling. This makes sense, since the header can be any Divi Builder layout and so there is no general way to shrink them. Of course, since there is no mechanism for shrinking the header, the code above isn't easily be modified to work with the custom headers.
It is possible to add a shrink-on-scroll effect to theme builder headers, but it requires the addition of custom code and some customization. There is an Elegant Themes' tutorial describing a way to do this:
How to Shrink Your Global Header’s Size When Scrolling with Divi’s Theme Builder
If you follow this tutorial, then you should be able to modify the scroll point simply by changing the scroll offset used in the jQuery code given in that post, e.g:
jQuery(function($){
$(window).scroll(function() {
if ($(document).scrollTop() > 1000) { // ### Change this to the number of pixels from the top at which to apply the shrink effect
$('#section-padding').addClass('reduce-section-padding');
$('#row-width').addClass('increase-row-width');
} else {
$('#section-padding').removeClass('reduce-section-padding');
$('#section-padding').addClass('slow-transition');
$('#row-width').removeClass('increase-row-width');
$('#row-width').addClass('slow-transition');
}
});
});In this case, I've changed it from 50 to 1000.
Important: The code above won't work by itself, it only works in the context of the rest of the tutorial in described in that Elegant Themes post.
AYO this snippet works a treat divi my nivi!
I add your script into section and it broke my site, even I delete this script, this still change my menu action. How to delete this action from my page?
Hi John, I'm sorry to hear this. The script doesn't change any site settings, etc, so deleting it should get rid of the action. If this isn't happening, either a) the script wasn't actually deleted (e.g. the save failed), b) the script was partially deleted, or a bit of surrounding code was deleted at the same time, or c) the old, broken, version of the page is still being served up by a caching plugin or stored in your browser cache.
I'd suggest first checking that the code was completely removed, and then clearing you caches (both on the server and in the browser).
If you're still having problems with it, or would like me to take a look at why the code failed in the first place, perhaps you could send me a link to the site you're working on?
Can I send URL in priv?
Sure. Just send it via the contact form on this page:
https://divibooster.com/contact-form/
Thanks!
Actually, it seems the .waypoint('destroy') isn't working for me even on newly created waypoints; perhaps they've updated the way it is supposed to be called?
Sorry, seems my first comment didn't make it – This code is persistently throwing an error "Handler not passed to constructor" at the line:
$('#main-content').waypoint('destroy');
At first I thought the waypoint had been perhaps moved to another element, but the same error is triggered even on a waypoint I've created myself. Perhaps it is particular to my site for some reason.
Perusing the docs hasn't enlightened me to the cause of the issue, perhaps you'll have better luck, Dan?
Hi Midnight Drive, yeah it looks like recent versions of the Waypoints library no longer accept the .waypoint('destroy') syntax, and Divi has updated the version of Waypoints that it uses.
It doesn't seem possible to replicate this line of code in the new Waypoints library (as you now need to actually have access to the variable holding the waypoint, which Divi doesn't expose), so I've rewritten the feature and updated the post above. It should now work correctly with the latest version of Divi.
Let me know if you have any problems with it. Cheers!
This seems to be broken at the moment.
The line:
$('#main-content').waypoint('destroy');
Causes an error to be thrown : "Handler not passed to constructor"
Seems to be trying to create a new waypoint, perhaps because it is not finding the assumed existing one. Maybe they moved it?
Thanks anyway for the great plugin it usually does the trick easily and works well.
Hi Chris, Divi had migrated to a new version of the waypoints library which uses a different syntax (hence the error). I've updated the post and Divi Booster to work correctly with the latest version of Divi.
where'd you put the modified jQuery waypoint? ty!!
Hi debbie, this post explains where to add the jQuery:
https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/
Does this still work? I've tried putting the code in the and it doesn't seem to. Maybe I'm doing something wrong?
Hi Andrew, Divi had migrated to a new version of the waypoints library which uses a different syntax. I've updated the post and Divi Booster to work correctly with the latest version of Divi.
Bought Divi Booster Plugin just to customize the fixed header shrinking and it doesn't seem to change anything. Do I have to do something else besides setting my own custom offset and checking the "Don't shrink the header until user scrolls down by…" box?
Hi Elena, it looks like Divi had migrated to a new version of the waypoints library which uses a different syntax. I've updated the post and Divi Booster to work correctly with the latest version of Divi.
Hi Dan! First off: Thank you for all the awesome tips and tricks on this site! :) Secondly: I am not sure what I am doing wrong, but the above code is not working for me. I added it to Divi Options –> Integration (with and before and after), but the header still shrinks at the default point. Any ideas?
BTW, the error I can see is "Error: No handler option passed to Waypoint constructor".
Hi Martin. Sorry I'm so late getting to this. Divi had migrated to a new version of the waypoints library which uses a different syntax. I've updated the post and Divi Booster to work correctly with the latest version of Divi.
Thanks for the tips. I have two questions, though :
1. When you perform $('#main-content').waypoint('destroy'), won't it also destroy lazy-loading behaviour ?
2. Why use a timer instead of waiting for the 'ready' event ?
Hi Fred, sorry for the way too late reply. I've updated the code with a new version, but to answer your questions:
1. No, it didn't seem to. I believe waypoints are attached to specific elements, so removing the waypoints from #main-content wouldn't affect the waypoints in a child element of that element. It would destroy any other waypoints attached to the #main-content element, other than the one I actually wanted to remove, but I checked and Divi wasn't attaching any other waypoints. The new code won't affect other waypoints.
2. If I recall correctly, Divi didn't add the waypoint until the 'ready' event was triggered. Due to the order in which the javascript was being evaluated it meant that running the code on the ready event would actually result in trying to destroy the waypoint before it was even created. The timer resolved this by waiting just long enough for the waypoint to be added before removing it.
Hello Dan,
It's a great function. But it don't work in my Divi theme.
Where do I have to copy the code into? I'd copied it in the functions.php of my child theme. But then the sites are crashed and nothing appears at the at the Site-URLs. What do I make wrong?
Hi Horst, it won't work in functions.php as the code in this post is javascript / jquery, not PHP. This post explains how to add JavaScript / jQuery to Divi:
https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/
And where do I put that code cause in custom.js it doesnt work
Thanks in advance
Hi Javier, if you still want to do this, this post explains where to put the code:
https://divibooster.com/adding-javascript-and-jquery-to-the-divi-theme/
In much the same fashion…would it be possible to add a feature where you can control how much the user must scroll before the hidden navigation appears?
Hi Jon, it should be, and it'd be a nice feature. I've added it to my list and will try to take a look as soon as I can.
Hej Dan
Whould be nice if you have done something like this :D
I was trying to get waypoint working in a child theme but can't get it to work unfortunately..
when I try somthing like
jQuery('#main-footer').waypoint(function() {
alert('Top of header hit top of viewport.');
});
I got no error but it doesn't trigger anyway.
Hi Dan, sorry I'm just getting to this. One thought is that you've adding the waypoint to a footer element. It's possible it's just never hitting the top of the viewport. But if you did try with the header and it still didn't work, I'd suggest checking with the waypoint docs. They recently updated the syntax and Divi is now using the newer syntax. Not sure if that's the problem, but you might have more luck with the alternative (object-oriented) waypoint format given on this page:
http://imakewebthings.com/waypoints/guides/getting-started/