Hide Divi Theme Header Until Scrolled

Over on the Divi users facebook group, Geno showcased his new homepage. On it, he achieves a cool trick of having the Divi Theme header hidden until the user begins to scroll down. I decided to try and recreate the effect.

Several ways of achieving the affect were discussed in the comments, including a neat solution by Fernando which employed a nice fade in / out effect. Taking Fernando's solution as inspiration, I spent some time working on it to come up with the solution below.

Some of the additions I made include:

  • Adding a media query (and jQuery width check) so that the effect wouldn't be applied on to the "mobile" menu
  • Adjusting the page-container padding to get rid of the gap where the header was
  • Speeding up the code by caching the jQuery lookups.
  • Adding code to handle resizing to correctly show / hide the header when crossing from the full screen to the mobile menu.

Here's the resulting CSS to add to Divi:

@media only screen and (min-width: 981px) {
    #main-header {
        -moz-transition: all 0s ease-in-out;
        -webkit-transition: all 0s ease-in-out;
        transition: all 0s ease-in-out;
        display: none;
    }
    #page-container {
        padding-top:0 !important;
    }
    .et_secondary_nav_enabled #page-container {
        padding-top:33px !important;
    }
}

And the jQuery:

jQuery(function($) {

    var fadetime = 500;

    var mh = $('#main-header');
    var body = $('body');
    var width = parseFloat(body.css("width"));

    $(window).scroll(function(){
        if (width >= 964) {
            if ($(this).scrollTop() > 1) {
                mh.fadeIn(fadetime);
            } else {
                mh.fadeOut(fadetime);
            }
        }
    });

    $(window).resize(function(){

        width = parseFloat(body.css("width"));

        if (width < 964 || $(this).scrollTop() > 1) {
            mh.show();
        } else {
            mh.hide();
        }
   });
});

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

18 Comments

  1. Hey can you check my site out

    http://findignited.com/

    I inputted the CSS and jquery code (with the script tags)

    It doesn't appear at all until I scroll down a bit, then I scroll up to the top and it appears and then disappears right away.

    Reply
    • Hey Jakob, I think the problem is that you have the "Divi > Theme Options > General > Fixed Navigation Bar" option disabled. With the option disabled, the header will scroll off the screen when you scroll down – so even though it is then faded in, you won't see it. Then when you scroll back up it is briefly visible before being faded out.

      The code above doesn't force the Fixed Navigation Bar option to be enabled, but it doesn't really make sense if it isn't. If you enable this option, then the header will stay at the top of the browser window and should be correctly hidden / revealed by the above code when scrolled. I hope that helps!

      Reply
  2. Hi Dan,

    I activated this in the plugin, but it didn't suit the website so I went and de-activated it – but it is still occurring on my website. What can I do to turn it off?

    Thanks!

    Reply
    • Hey Cody, if you've unchecked the feature and re-saved the Divi Booster settings, then it is most likely a caching problem. Try clearing the caches of any performance plugins you have W3 Total Cache, WP Super Cache, etc. Also clear your browser's cache (CTRL-shift-delete in most browsers). Let me know if that doesn't fix it up. Cheers!

      Reply
    • Thanks Isaac. You need to place the jQuery code (and surrounding <script> tags) just before the </body> tag. Also the tag at the end of the jQuery should be </script> instead of <script>.

      Try that and let me know if you still have problems.

      Reply
      • Rookie mistake…lol.

        That fixed it.

        Thanks Dan. Really enjoying the blog.

        Reply
  3. Hi,
    So I did this and it's work great. Except for one thing…The header doesn't appear on scroll…or at all.

    Thoughts?

    Reply
    • Hmm… so not ideal then! It sounds like a JavaScript error (either the jQuery code here isn't working for some reason, or something else is triggering a JavaScript error which is stopping the jQuery from being run). Are you able to provide a link to an affected page? If not, would you be able to load the page in Chrome, press "F12" and then "Console" and tell me if any JavaScript errors are displayed (either when you load the page or when you try to scroll down)?

      Reply
  4. I am grateful for this solution! I tested it in Firefox and Chrome and it seems to work beautifully but it seems there is a gap left behind for the secondary nav in Safari (Mac). Is there any way to fix this? I am using Divi2.

    Reply
      • Cool. Thanks for sharing that, Phill.

        Reply
  5. Hey Dan!

    Where do you add the jQuery codet?

    Thanks!

    Reply
    • Hey Raffe, the easiest way to add the jQuery to your theme is to place it in the footer.php file (of a child theme, ideally), surrounded by script tags, e.g.

      <script>
      ... jquery code from above ...
      </script>
      
      Reply
  6. This didn't work for me, the jQuery script didn't get rid of the space where the heading should be.

    Reply
    • Edit: Sorry! Nvm, it's okay, I have decided not to use this effect anymore… but still curious as to why the code didn't work for me :(

      Reply
    • Hey Jojo! The problem was that when the page loads, Divi waits a little bit and then adjusts the padding to leave space for the header. My code tried to wait a bit longer and then remove that padding, but not too long or the page would become jerky. It seems like it probably wasn't waiting long enough in some cases, causing Divi to come along and create the gap after my code tried to get rid of it.

      I could have tried to fix this by increasing the delay, but really it was a pretty messy way to solve the problem. I've taken another look at the problem and completely revised the code so that it no longer has to play the waiting game and should, hopefully, work for you if you ever want to give it another go.

      Reply
      • Hi Dan,

        Perfect, it worked this time, you are super, super, super awesome!

        Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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