If you are in search of show hide menu like this beautiful website. Then here is a tutorial, In this tutorial, I haven’t use headroom.js I have used simple jQuery but I will make another tutorial where I use headroom.js for the same purpose. So let’s get started to get hide show menu scroll through jQuery.

Step 1: 

As always step 1 is making environment. I always assume starting point as Divi default settings. So, first of all, navigate to Divi > Theme option > Disable fix navigation as shown in figure 1.1 because we don’t need fix navigation here since we show hide menu on a scroll.

Figure 1.1

That’s it! We have the environment ready now. Let’s move to the next step.

Step 2: 

In this step, we are going to copy jQuery and CSS code to their places.
For jQuery please copy following code and paste it in Divi > theme option > Integration > Add code to the head (as mentioned in Figure 1.2)

<script>
jQuery(document).ready(function($){
var prev = 0;
var $window = $(window);
var nav = $('#main-header');

$window.on('scroll', function(){
  var scrollTop = $window.scrollTop();
  nav.toggleClass('hidden', scrollTop > prev);
  prev = scrollTop;
});
});
</script>

Figure 1.2

 

Now it’s time for CSS. Okay now copy following CSS code and paste in Divi > Theme Options > Custom CSS (as shown in figure 1.3)

#main-header { position: fixed;}
#main-header.hidden {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.logged-in #main-header {margin-top:32px;}

Figure 1.3

Obviously, Don’t forget to SAVE CHANGES.

That’s it! You just transform your menu into animated show hide menu. EASY!
Let me know in comments if any issue arrives.

Note: If above code doesn’t work then please include jQuery library. I didn’t add it because in Divi version 3.0.85 we don’t need it. jQuery library code is following;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>