How to show / hide sticky menu on scroll in Hestia

By default, the navigation bar is transparent if you are on top of the page, and it turns white if you scroll down. Also, the navigation bar remains visible during the whole process.

In this guide, you will learn how to hide the navigation bar when scrolling down and show it again once you scroll up.

1: First, you need to install the Orbit Fox plugin (Hestia recommended).

2: Then, navigate to Appearance > Customize.

3: Open the Header/Footer scripts.

4: Copy the code below and paste it inside Header scripts.

<script type = "text/javascript" >
   window.addEventListener('DOMContentLoaded', (event) => {
       var lastScrollTop = 0;
       jQuery(window).scroll(function() {
           var st = jQuery(window).scrollTop();
           if (st > lastScrollTop) {
               jQuery('nav.navbar:not(.navbar-transparent)').slideUp();
           } else {
               jQuery('nav.navbar:not(.navbar-transparent)').slideDown();
           }
           lastScrollTop = st;
       });
   });
</script><br>

5: Once this is added, press Publish.

How to show / hide sticky menu on scroll in Hestia

💡Result