How to Create a Hidden Header on Scroll Down in WordPress with Elementor (Transparent Initial State, Show on Scroll Up)

In WordPress sites built with Elementor, a popular header effect is to start with a transparent header (no background visible on the homepage hero section), hide the header when scrolling down, and reveal it when scrolling up. This creates a clean, modern user experience while keeping navigation accessible.

There are two reliable methods to achieve this: using Elementor’s built-in Scrolling Effects (no extra plugins needed) or the free Sticky Header Effects for Elementor plugin for more advanced control.

Method 1: Using Elementor’s Built-in Scrolling Effects (Recommended for Simplicity)

Elementor Pro’s native features allow you to make the header transparent initially and fade in a background (or adjust opacity) on scroll. For full hide/show behavior on scroll direction, combine it with sticky settings.

Step-by-Step Guide:

1. Edit your header template in Elementor (or the page if using a section as header).
2. Select the header section/container.
3. Go to the Style tab.
4. Under Background > Transparency, enable Scrolling Effects if available, or use the Sticky options in the Advanced tab.
5. Set the header to Sticky > Top.
6. In Advanced > Motion Effects > Sticky Effects (or Scrolling Effects):
   • Enable Transparent on Scroll or adjust Background Color/Opacity based on viewport.
   • A common setup: Set initial background to transparent, then change opacity or color when scrolled (e.g., viewport bottom at 10% for fade-in).

For directional hide/show, Elementor’s native tools focus more on transparency/opacity changes rather than full hide on down/reveal on up.

elementor.com

elementor.com

youtube.com

Note: If you need precise hide-on-scroll-down behavior, proceed to Method 2.

Method 2: Using the Sticky Header Effects for Elementor Plugin (Best for Full Hide/Show on Scroll Direction)

This free plugin extends Elementor’s header capabilities, allowing true hide header on scroll down, show on scroll up, and initial transparent background.

Steps:

1. Install and activate the Sticky Header Effects for Elementor plugin from the WordPress repository.
2. Edit your header template (or page) with Elementor.
3. Select the header section.
4. Go to the Advanced tab.
5. Scroll down to the Sticky Header Effects section.
6. Toggle Enable Sticky Header Effects on.
7. Check these key options:
   • Transparent Header: Makes the initial background transparent.
   • Hide Header on Scroll Down: Hides the header when scrolling down, shows it when scrolling up.
8. Customize other settings as needed (e.g., shrink header, background color on scroll, opacity).

This method provides the exact behavior described: hidden background initially, hide on down-scroll, reveal on up-scroll.

wordpress.org

wordpress.org

youtube.com

youtube.com

Which Method to Choose?

• Use Method 1 if you want a lightweight, no-plugin solution focused on transparency and fade effects.
• Use Method 2 for advanced directional scrolling (hide on down, show on up) with full control.

Both work seamlessly with Elementor themes like Hello Elementor or Astra. Test on mobile for responsiveness.

If you’re building a modern WordPress site, this scroll-triggered header effect improves UX and can boost engagement—perfect for portfolios, blogs, or landing pages!