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.
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>
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;}
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>
Recent Comments