---
title: "How to Hide Header on Scroll Down Effect in Elementor?"
url: https://theplusaddons.com/docs/hide-header-on-scroll-down-effect-in-elementor/
date: 2024-04-16
modified: 2026-08-31
lang: en
author: "Aditya Sharma"
description: "Do you want to hide the header on scroll down in Elementor? In this effect the sticky header does not stick at the top when you scroll down, it only..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Hide-Header-on-Scroll-Down-Effect-in-Elementor_-1024x536.jpg
word_count: 953
---

# How to Hide Header on Scroll Down Effect in Elementor?

## 

- The Plus Addons for Elementor Navigation Menu widget hides the sticky header while a visitor scrolls down and slides it back into view when they scroll up.
- Sticky Menu is the master switch, and On Mouse Scroll Up Sticky appears only after Sticky Menu is enabled in Extra Options.
- The effect requires Elementor FREE, The Plus Addons for Elementor PRO, and an activated Navigation Menu widget under Plus Settings.
- The header needs a background color, and the effect applies per Navigation Menu widget instance, so each menu widget in a multi-menu header needs its own toggle settings.

Do you want to hide the header on scroll down in Elementor? In this effect the sticky header does not stick at the top when you scroll down, it only reappears when you scroll back up. This unique effect gives visitors a cleaner, less cluttered browsing experience while keeping navigation one scroll away.

Table Of Contents

## What It Does

The Hide Header on Scroll Down effect keeps your Navigation Menu widget's sticky header hidden while a visitor scrolls down the page, then slides it back into view the moment they scroll up.

## Why It Matters

A header pinned on screen at all times can eat into content space and feel intrusive on long-scrolling pages. Hiding it on scroll down keeps the header out of the way while a visitor is reading, and brings it back instantly the moment they scroll up to navigate, so key menu items and CTAs stay reachable without cluttering the page.

## What You Get

- A Navigation Menu widget with sticky behavior tied to scroll direction, not just scroll position.
- The **On Mouse Scroll Up Sticky** toggle under Extra Options, gated behind the Sticky Menu switch.
- Full control over the sticky header's background, padding, height and width from the Style tab, independent of this show/hide behavior.

## Benefits

- Reclaims vertical space while a visitor reads or scrolls through content.
- Keeps the menu one upward scroll away instead of removing it from view entirely.
- Works with any header layout built from The Plus Addons for Elementor widgets.

## Capabilities

This behavior is controlled by two Extra Options controls on the Navigation Menu widget, verified against the current plugin source:

- **Sticky Menu** (control ID `enable_sticky_menu`): the master sticky-header switch, off by default.
- **On Mouse Scroll Up Sticky** (control ID `enable_sticky_osup_menu`): off by default, and only shown once Sticky Menu is enabled; this is the toggle that produces the hide-on-scroll-down, show-on-scroll-up effect.

## How It Works

With Sticky Menu enabled, the header fixes to the top of the viewport as normal. Enabling On Mouse Scroll Up Sticky on top of that changes the trigger from "always visible once sticky" to "visible only while the scroll direction is upward": scrolling down slides the header off-screen, scrolling up slides it back into view.

## How to Use It

### Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.
- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.
- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)
- Make sure the Navigation Menu widget is activated, to verify this visit Plus Settings → and Search for Navigation Menu and activate.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

### Learn via Video Tutorial

Video walkthrough: hiding the header on scroll down and showing it on scroll up.

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

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*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.*

- From the **Layout** tab, select **Horizontal Menu** from the **Menu Direction** section after selecting the appropriate **Menu Type**. Then add the appropriate menu.
- After that, enable the **Sticky Menu** toggle from the **Extra Options** tab.

Enabling the Sticky Menu toggle from the Extra Options tab.

- 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 out of view with the content, but as you scroll up, the sticky header will show.

Final result: the header hides on scroll down and reappears on scroll up.

## Use Cases

- Content-heavy blogs and documentation sites where a permanently visible header competes with reading space.
- Landing pages that want navigation available without a header that stays fixed and visually dominant throughout the whole scroll.
- Mobile-first designs where every extra pixel of vertical space matters.

## Limitations

- On Mouse Scroll Up Sticky only appears once Sticky Menu is enabled; it cannot be used as a standalone effect.
- The effect depends on a header background being set; a fully transparent sticky header can make the hide/show transition visually inconsistent.
- This is a PRO-only capability of the Navigation Menu widget and requires The Plus Addons for Elementor PRO to be active.
- Behavior is applied per Navigation Menu widget instance; a header built with multiple menu widgets needs the toggle set on each one individually.

## Troubleshooting

**Header jumps or ends up stuck mid-screen instead of hiding/showing cleanly.** This is usually a conflicting position/transform CSS rule from the theme or another widget on the same section. Remove custom CSS affecting the header container and re-test with only the Navigation Menu widget's own sticky settings applied.

**A second header row does not stay visible when the main row hides on scroll down.** The hide/show effect applies to the element the Sticky Menu and On Mouse Scroll Up Sticky toggles are set on. For a multi-row header where one row should remain while another hides, build each row as its own section/container and apply sticky settings only to the row you want to hide, keeping the other row outside that container.

**Other page elements (custom devices, mockups, popups) scroll over the top of the sticky header instead of passing underneath it.** This is a stacking order issue: give the overlapping element a lower z-index than the sticky header's container, or increase the sticky header container's z-index from the Advanced tab so it consistently stays above other absolutely/fixed-positioned elements.

***Suggested Reading***: [*How to Create a Shrinking Header Effect in Elementor?*](https://theplusaddons.com/docs/shrinking-header-effect-in-elementor/)