October 4, 2023

Hide Navbar on Scroll Down in Elementor

Play Video

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;

    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.

Required Resources

Code Snippets Logo
Free Options
Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Hide Navbar on Scroll Down in Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.