---
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-04-09
author: "Aditya Sharma"
description: "Do you want to hide the header on scroll down in Elementor? In this effect the sticky header doesn’t stick at the top when you scroll down it only shows..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Hide-Header-on-Scroll-Down-Effect-in-Elementor_-1024x536.jpg
word_count: 281
---

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

## Key Takeaways

- The Plus Addons for Elementor requires the PRO version to access the sticky header feature.
- The Navigation Menu widget must be activated in Plus Settings to implement the scroll down effect.
- The sticky header only appears when scrolling up after being hidden during downward scroll.

Do you want to hide the header on scroll down in Elementor? In this effect the sticky header doesn’t stick at the top when you scroll down it only shows when you scroll up. This unique effect can provide a cleaner and more seamless browsing experience.

### 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:

https://www.youtube.com/watch?v=w85PCKvM1uo

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 -

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

1. From the **Layout** tab, select **Horizontal Menu** from the **Menu Direction** section after selecting the appropriate **Menu Type**. Then add the appropriate menu.

2. After that enable the **Sticky Menu** toggle from the **Extra Options** tab.

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

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

## Frequently Asked Questions

**Q: What should I do if the header doesn't hide on scroll down?**
A: If the header isn't hiding as expected, ensure that the 'On Mouse Scroll Up Sticky' toggle is enabled in the Extra Options tab. This setting is crucial for the header to only appear when scrolling up. Additionally, confirm that the Navigation Menu widget is properly activated in Plus Settings.

**Q: Can I use the hide header effect with other Elementor widgets?**
A: The hide header on scroll down effect specifically requires The Plus Addons for Elementor's Navigation Menu widget. This means it won't work with other widgets or page builders like Gutenberg or Divi. Make sure to use the correct widget to achieve the desired effect.

**Q: What is the best way to set up my header for this effect?**
A: For optimal results, create your header using The Plus Addons for Elementor's widgets, including the Site Logo and Header Meta Content. Ensure you select 'Horizontal Menu' from the Menu Direction section and enable the Sticky Menu toggle. This setup provides a clean and functional header that enhances user experience.

**Q: Does this effect work on mobile devices?**
A: The page does not specify mobile compatibility for the hide header on scroll down effect. However, since it relies on the Navigation Menu widget from The Plus Addons for Elementor, it's advisable to test the effect on mobile devices to ensure it behaves as expected.

**Q: Are there any limitations when using the PRO version of The Plus Addons for Elementor?**
A: While the PRO version of The Plus Addons for Elementor unlocks premium widgets, it is essential to note that this specific effect requires the PRO version to function. Without it, you won't be able to access the necessary features for the hide header on scroll down effect.