How to Hide the Header on Scroll Down in Elementor

Hiding a header while a visitor scrolls down, then bringing it back the moment they scroll up, gives content more room without losing navigation entirely. Elementor has no native setting for this. Hide Header on Scroll Down, one of Sticky Header Effects for Elementor’s 10 free effects, is built specifically for it.

This is one of three effects named in a real conflict involving this exact effect, worth reading if it is combined with a background or logo-color change.

Elementor hide header on scroll down behavior is controlled entirely by this one scroll-distance setting, not a fixed pixel value baked into the plugin. It runs on the same CSS transform property as every other effect in the plugin.

Key Takeaways

• Hide Header on Scroll Down hides the sticky header when the visitor scrolls down and reveals it again as soon as they scroll up, using scroll-direction detection.
• It is free, works on Elementor Free or Pro, and is separate from the base sticky toggle; sticky positioning has to be enabled first.
• It depends on real scroll events, so it behaves more reliably when tested on the live front end than inside Elementor’s editor canvas.
• Combine it with Header Scroll Distance to control how far the visitor scrolls before the hide behavior can trigger at all.
• A resize-style animation that looks similar but is not the same effect is a known, separate issue, not this feature working as intended; the difference is described below.

What the Effect Actually Does

Once the header is sticky, Hide Header on Scroll Down watches scroll direction. Scrolling down past the set trigger point slides the header out of view, usually upward, off the top of the screen. Scrolling back up immediately reverses it, bringing the header back before the visitor has to scroll all the way to the top.

The effect is aimed at long pages: blog posts, documentation, product listings, anywhere the sticky header’s constant presence competes with the content for vertical space. Hiding it on the way down and restoring it on the way up keeps navigation available without it permanently occupying part of the screen.

Setting It Up

Select the header section or container and open the Advanced tab. Turn on the base sticky control first; Hide Header on Scroll Down modifies sticky behavior, so it has nothing to act on until the header is sticky in the first place.

Enable Hide Header on Scroll Down from the same Sticky Header Effects control group. Pair it with Header Scroll Distance if the header should stay visible for an initial stretch of scrolling, over a tall hero image for example, before the hide behavior becomes active at all.

Why This Needs Testing on the Live Page, Not the Editor

Elementor’s editing canvas runs inside an iframe, and scroll-direction detection depends on real browser scroll events that do not always fire identically inside that frame. An effect that looks like it is not working while editing frequently works correctly once previewed on the actual front end.

Always confirm this specific effect using the page preview or the published page directly, scrolling with an actual mouse wheel or trackpad gesture rather than the editor’s internal scroll behavior.

A Real Reported Issue, and How It Differs

A closed support ticket describes a header with an unwanted “animation where it extends to the sides and contracts back” while scrolling. That is a resize-style visual glitch, not this effect, and it typically points to a conflicting width or padding transition on the header section rather than anything related to Hide Header on Scroll Down.

If a header appears to stretch or contract sideways rather than sliding cleanly up and down, check for a second animation, either from the theme or a separate Elementor motion effect, applied to the same section. Hide Header on Scroll Down only affects vertical position and visibility, never width.

Combining It With Other Effects

Hide Header on Scroll Down is commonly paired with Dynamic Background Color Change or Header Shrinking, so the header both changes appearance and can hide on longer scroll sessions. All three are free and configured from the same Advanced tab panel.

On Pro, Display Conditions can restrict where the hide behavior applies, useful on a site where some page types, a checkout flow for example, should always keep the header visible regardless of scroll direction.

Checking It on Mobile Separately

Mobile browsers frequently show and hide their own address bar as part of scroll behavior, which changes the visible viewport height mid-scroll. Test Hide Header on Scroll Down on an actual phone rather than only a resized desktop browser window, since that address-bar behavior can interact with scroll-direction detection differently than a desktop browser ever will.

Like every effect in the plugin, this one can be enabled or disabled independently per device. A site that wants the header to always stay visible on mobile, where screen space for a reappearing header matters more, can leave the effect active on desktop only.

A Note on Keyboard and Screen Reader Navigation

A header that hides visually still exists in the page’s markup, so screen readers and keyboard-only navigation are not blocked from reaching it. What changes for a sighted mouse or trackpad user, a header that slides out of view on scroll, is not the same experience a keyboard user tabbing through the page gets, since focus order is unaffected by the visual hide.

This is worth checking directly rather than assuming: tab through the page with the header hidden and confirm focus does not visually disappear along with it, since a focused link inside a hidden header can be confusing even if it remains technically reachable.

When Not to Use It

On a short page that never scrolls far past the fold, this effect has little to react to and adds complexity without a visible benefit. It is built for pages long enough that a permanently visible header meaningfully competes with content for space, not every page on a site.

A landing page built around a single tall hero and a short scroll to a form is a case where the effect rarely earns its place. A long-form blog post, documentation page, or product catalog is where it tends to matter most.

Frequently Asked Questions

Is Hide Header on Scroll Down a free effect? Yes, one of 10 free effects, on Elementor Free or Pro, no license required.

Why does the header not hide when I test it in the Elementor editor? Scroll-direction detection depends on real browser scroll events, which behave more reliably outside the editor’s iframe. Test on the live preview or published page instead.

Can I make the header stay visible on certain pages only? On Pro, Display Conditions controls exactly that. On Free, the effect applies wherever the header section itself is used.

Does hiding the header on scroll hurt Core Web Vitals? Not by itself. The effect runs on transform and opacity, the same approach used across all 21 effects in the plugin, which avoids the layout-recalculation cost heavier scroll-triggered animations can add.

For setup steps covering every free and Pro effect together, see the Elementor sticky header setup guide and the plugin’s own documentation. For the browser mechanics behind scroll-position CSS, MDN’s position reference covers how sticky and fixed positioning work at the specification level. Browse the full template library, including the Ecoflux template shown above, for more headers built around this effect.