How to Hide Header on Scroll Down Effect in Elementor?

Updated onDecember 17, 2025By
Table Of Content

Do you want to hide the header on scroll down in Elementor? In this effect the sticky header doesn’t stick at the top when you scroll down it only shows when you scroll up. This unique effect can provide a cleaner and more seamless browsing experience.

Required Setup

LIVE WIDGET LINK

Learn via Video Tutorial:

YouTube video

To do this, add the Navigation Menu widget to the header template and set up the layout as per your requirement then follow the steps –

For instance, we’ve created a header with the Site Logo, Navigation Menu and Header Meta Content widgets of The Plus Addons for Elementor.

Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.

1. From the Layout tab, select Horizontal Menu from the Menu Direction section after selecting the appropriate Menu Type. Then add the appropriate menu.

2. After that enable the Sticky Menu toggle from the Extra Options tab.

3. Then enable the On Mouse Scroll Up Sticky toggle.

Note: Make sure you’ve added a background color to the header.

Now when you scroll down the sticky header will scroll up with the content but as you scroll up the sticky header will show.

Suggested Reading: How to Create a Shrinking Header Effect in Elementor?

AUTHOR

Aditya Sharma

  • CMO
  • 6+ Years Experience
Aditya has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Docs