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"));

        if (width >= 964) {
            if ($(this).scrollTop() > 1) {
            } else {


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

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