TL;DR – Quick Summary
So you want to hide your Elementor header when a user scrolls down – and show it again when they scroll up, right & hence you're googling for “elementor hide header on scroll down”.
Well, know that you can do this without extra plugins, using Elementor Pro’s sticky header feature and a bit of custom JavaScript + CSS. This guide walks you through it in minutes.
Why Hide the Header on Scroll?
Imagine you're reading a blog post, and the menu bar keeps taking up screen space.
Annoying, right?
This effect solves that.
When your visitors scroll down, the header vanishes. Scroll up? It pops right back.
This keeps the focus on your content and improves the mobile experience big time.
What You’ll Need
- Elementor Pro (for sticky headers and adding custom code)
Look — free Elementor is great, but it doesn’t support sticky headers or custom JS/CSS natively. Elementor Pro unlocks that plus way more design freedom. - Basic Elementor layout knowledge
- This guide (that’s what I’m here for!)
Step-by-Step: Elementor Hide Header on Scroll
1 – Design Your Sticky Header
- In WordPress Dashboard → Templates → Theme Builder → Header.
- Design your header or edit the existing one.
- Under the Advanced > Motion Effects, set the header to:
- Sticky: Top
- Effects Offset: 0
- Stick to: Entire Website
- Uncheck “Hide On Devices” if you want it to work on mobile too.
2 – Add a CSS ID
- Select your header Section in Elementor.
- Go to Advanced > CSS ID, and enter:
hide-header
3 – Add JavaScript to Detect Scroll Direction
- In WordPress Dashboard → Elementor → Custom Code → Add New.
- Set location to Header and priority to 10.
- Paste this JavaScript:
<!-- Hide and Show Elementor Header -->
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("hide-header").style.top = "0";
} else {
document.getElementById("hide-header").style.top = "-80px";
}
prevScrollpos = currentScrollPos;
}
</script>
4 – Add Custom CSS for Smooth Transition
Beneath the Javascript code, simply add this tiny little CSS for making the smooth scroll…
<style>
/* Sticky Header Speed Control */
#hide-header {
transition: all .4s ease!important;
}
</style>Done!
You’ve got a header that disappears on scroll down and returns on scroll up – no plugin needed.
Prefer a Plugin? You Can Try This Too
If you're not into adding code manually, plugins like Sticky Header Effects for Elementor offer this as a toggle. But honestly? Custom code = cleaner and faster.
Common Issues & Fixes – Elementor Hide Header on Scroll
| Problem | Solution |
|---|---|
| Header not hiding/showing | Double-check your CSS ID is hide-header |
| Works on desktop, not mobile | Ensure sticky is enabled on mobile |
| Header jumps | Add z-index: 999 and smooth transitions |
Pro Tips to Improve the Effect
- Want the header to hide only after scrolling 100px? Update this line in JS:
if (scrollTop > 100 && scrollTop > lastScrollTop) {- Add a background transition too for a sleek feel.
Related Elementor Tutorials You Might Like
🚀 Useful Elementor Tutorials to Level up your Elementor Game…
FAQs related to Elementor Hide Header on Scroll
Can I do this with the free version of Elementor?
Not really. Sticky headers and custom code insertion need Elementor Pro.
Will this work on all themes?
Yes – as long as your theme doesn’t override Elementor’s sticky behavior.
How do I make the hide/show smoother?
Use the “transition” CSS and play around with “ease-in-out” or duration values.
Final Thoughts
If you think it's just a cool trick, you're missing it completely as it's UX polish.
Small things like this make your site feel premium and mobile-friendly. Whether you're running a blog or a business site, the elementor hide header on scroll effect is one of those subtle enhancements that users love.
Try it out, and if you're not already using Elementor Pro, now’s a good time to level up.
I hope this quick guide helped you achieve the hide header effect.
And remember if you need any help, I'm just an email away. Drop a comment or get in touch.
Cheers,
Kuldeep – Your Elementor Guy