Divi » Breadcrumbs » Module

Launch offer - 30% off

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();
        }
   });
});