How to Hide Header Menu in Scroll Down and Show on Scroll Up | Elementor Sticky Headers [Video Tutorial]

Updated onApril 11, 2026By

Key Takeaways

  • Elementor Sticky Header hides the complete Header when scrolling down and shows it again when scrolling up.
  • The Elementor Sticky Header includes 8 styles, allowing changes to color, logo, and font size.
  • The addon provides effects like Transparent Sticky Header and Shrinking Header Effect.
Table Of Content
YouTube video
Video Duration: 01 : 22

Video Overview

We will see how to Hide Elementor Header Menu when you scroll down and show again when scroll up. This will automatically hide the complete Header when scrolling down, and make the header visible again when we scroll upwards.

Our Elementor Sticky Header comes with 8 more styles, you can change colour logo or font size as well, when the Header is sticky.

▶ Widgets Used – https://theplusaddons.com/elementor-builder/header-builder/

You can Create 8 More Header Effects for Elementor
▶️ Watch Full Video – https://youtu.be/FfXpQOhWnfM

Header Style you can achieve using this addon
✅ Sticky Elementor Header Effect
✅ Sticky Menu with on scroll Colour Change Effect
✅ Transparent Sticky Header Effect
✅ Sticky Glass Effect/Blurry Header Effects
✅ Hide Header on Scroll Down Effect
✅ Change Header Height on Scroll/Shrinking Header Effect
✅ Change Header Menu Logo on Scroll
✅ Change Header Logo On Hover

▶ Get 120+ Powerful Widgets for Elementor – https://theplusaddons.com/pricing/
▶ Nexter Theme Builder – https://nexterwp.com/
USE CODE ‘ YOUTUBE10 ‘ TO ENJOY EXTRA 10% DISCOUNT

Get The Plus Addons for Elementor
View 120+ Elementor Widgets Demo

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He 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.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the header menu doesn't hide when scrolling down?

If the header menu isn't hiding on scroll down, check the settings in the Elementor Sticky Header options. Ensure that the 'Hide Header on Scroll Down' effect is enabled. This feature allows the complete header to disappear when you scroll down, enhancing user experience by maximizing screen space.

Can I use the hide/show header feature for mobile devices?

The hide/show header feature works on mobile devices as well, allowing for a responsive design. This is particularly useful for mobile users, as it provides more screen real estate for content while still keeping navigation accessible when scrolling up.

What is the best practice for using the sticky header effect?

A best practice for using the sticky header effect is to ensure that the header remains visually consistent with your site's branding. The Plus Addons for Elementor allows you to change the header's color, logo, and font size when it becomes sticky, which can help maintain brand identity while providing a functional navigation experience.

Are there any limitations to the sticky header feature?

One limitation of the sticky header feature is that it only works with Elementor and does not support other page builders like Gutenberg or Divi. This means if you're using a different builder, you won't be able to implement these specific sticky header effects.

Last reviewed: April 11, 2026

Related Docs