Divi » Breadcrumbs » Module

Launch offer - 30% off

Making the Divi Header Shrink Further Down the Page

Here’s how to delay changing to the Divi fixed header until your users have scrolled down the page a bit.

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

This is an new version of my original code, updated to work with the latest version of Divi (3.0.39 at the time of writing).

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.

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

This is my original implementation. Due to changes in Divi this no longer works on recent Divi versions. The new version given above is preferable as it works everywhere this one does, as well as on the most recent versions of Divi.

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):

To let us set the header to trigger at an exact number of pixels from the top of the page, I’ve re-attached the new waypoint instead of the main content, and have included an adjustment for when the WordPress admin bar is present (so that it looks the same to both the developer and the users).

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

28 Comments

  1. John

    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?

    Reply
    • Kwartnik.pl Mariusz Kwartnik

      Can I send URL in priv?

      Reply
    • dan

      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?

      Reply
  2. Midnight Drive

    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?

    Reply
    • Midnight Drive

      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?

      Reply
      • 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!

        Reply
  3. Chris

    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.

    Reply
    • dan

      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.

      Reply
  4. debbie kay

    where’d you put the modified jQuery waypoint? ty!!

    Reply
  5. Andrew

    Does this still work? I’ve tried putting the code in the and it doesn’t seem to. Maybe I’m doing something wrong?

    Reply
    • dan

      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.

      Reply
  6. Elena Novinskiy

    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?

    Reply
    • dan

      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.

      Reply
  7. Martin

    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?

    Reply
    • Martin

      BTW, the error I can see is “Error: No handler option passed to Waypoint constructor”.

      Reply
      • dan

        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.

        Reply
  8. Fred

    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 ?

    Reply
    • dan

      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.

      Reply
  9. Horst Wittmann

    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?

    Reply
  10. Javier

    And where do I put that code cause in custom.js it doesnt work

    Thanks in advance

    Reply
  11. Jon Miller

    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?

    Reply
    • dan

      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.

      Reply
      • Dan Sørensen

        Hej Dan

        Whould be nice if you have done something like this 😀
        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.

        Reply
        • dan

          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/

          Reply

Submit a Comment

Your email address will not be published. Required fields are marked *