Show hide menu on scroll

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.