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
- Navigate to
Pages > Add New
and create a new page with Elementor. - Add a container at the top of the page.
- 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
- Select the container.
- Go to
Advanced > Motion Effects
. - Choose
Sticky Top
from the dropdown. - Set the offset to 100 pixels.
- 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
- Navigate to
Plugins > Add New
. - Search for Code Snippets and install it.
Add New Snippet
- Navigate to
Snippets > Add New
. - Name it “Hide Navbar on Scroll”.
- 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
- Go back to your Elementor page.
- Navigate to
Advanced > Custom CSS
. - 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
- Save all changes.
- Preview the page in an incognito window.
- Scroll down to see the header disappear.
- 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.