Hide Navbar on Scroll Down in Elementor

To hide your navbar on scroll down in Elementor, you’ll need to use a combination of Elementor’s built-in features, custom CSS, and JavaScript. This tutorial will walk you through the process step-by-step.

Setting Up the Header

1. Navigate to Pages > Add New and create a new page with Elementor.
2. Add a container at the top of the page.
3. Insert a header element into the container.

Tip: This is not a header template; it’s a regular page. The tutorial aims to show that the technique works on any page.

Making the Header Sticky

1. Select the container.
2. Go to Advanced > Motion Effects.
3. Choose Sticky Top from the dropdown.
4. Set the offset to 100 pixels.
5. Go to Advanced > Layout and add your CSS ID/CSS Classes (in our case “scrolling-header”)

Note: You can adjust the offset based on your needs. The offset determines how many pixels you need to scroll before the header disappears.

Adding JavaScript and CSS

Install Code Snippets Plugin

1. Navigate to Plugins > Add New.
2. Search for Code Snippets and install it.

Add New Snippet

1. Navigate to Snippets > Add New.
2. Name it “Hide Navbar on Scroll”.
3. Paste the JavaScript code:

   add_action('wp_footer', 'custom_hide_header_script');
   function custom_hide_header_script() {
   ?>
   <script type="text/javascript">
     (function() {
       var prevScrollpos = window.pageYOffset;
       window.onscroll = function() {
         var currentScrollPos = window.pageYOffset;
         if (prevScrollpos > currentScrollPos) {
           document.getElementById("scrolling-header").style.top = "0";
         } else {
           document.getElementById("scrolling-header").style.top = "-100px";
         }
         prevScrollpos = currentScrollPos;
       };
     })();
   </script>
   <?php
   }

   Source: Code Snippets

Note: You can replace the CSS ID and Class name with your own (e.g. “scrolling-header”) but make sure your container has the same ID.

Add Custom CSS

1. Go back to your Elementor page.
2. Navigate to Advanced > Custom CSS.
3. Add the following CSS:

   .scrolling-header {
     transition: all 0.5s ease!important;
   }
   

Tip: The CSS ensures a smooth transition when the header appears or disappears.

Testing the Functionality

1. Save all changes.
2. Preview the page in an incognito window.
3. Scroll down to see the header disappear.
4. Scroll up slightly to see it reappear.

Hide Navbar on Scroll – Conclusion

Hiding the navbar on scroll down in Elementor is a straightforward process that involves a bit of Elementor configuration, JavaScript, and CSS. This feature can enhance the user experience by providing a cleaner view while scrolling.