--- 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-09-11 lang: en author: "Aditya Sharma" description: "Do you want the header out of the way while visitors read, but back the moment they need it? With this effect the header slides away as visitors scroll down..." image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Hide-Header-on-Scroll-Down-Effect-in-Elementor_-1024x536.jpg word_count: 436 --- # How to Hide Header on Scroll Down Effect in Elementor? ## - The Plus Addons for Elementor Navigation Menu widget in Pro uses two switches, Sticky Menu and On Mouse Scroll Up Sticky, to hide the header on scroll down and show it again on scroll up. - Sticky Menu fixes the container or outer section that holds the Navigation Menu widget, so the logo and buttons stay in the same container with it. - A header background is required in Style > Sticky Main Menu > Section Background Options or on the container, and a small scroll of a few pixels is ignored to prevent flicker. Do you want the header out of the way while visitors read, but back the moment they need it? With this effect the header slides away as visitors scroll down and slides back as soon as they scroll up. With the Navigation Menu widget from The Plus Addons for Elementor, it takes two switches. *To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text) Table Of Contents ## Before You Start - **Edition:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free **Navigation Menu Lite** widget does not have this option.- **Widget to enable:** Navigation Menu, switched on under **The Plus Addons > Widgets**.- **A header template.** Add the widget to your site's header so the menu shows on every page. Build the header with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder.- **A WordPress menu** under **Appearance > Menus**, if you use the **Default** menu type. ## Learn via Video Tutorial https://www.youtube.com/watch?v=w85PCKvM1uo ## Steps - Build your header with the Navigation Menu widget in the same container as your logo and buttons.- In **Content > Extra Options**, switch on **Sticky Menu**.- Switch on **On Mouse Scroll Up Sticky**, which appears below it.- Give the header a background — in **Style > Sticky Main Menu > Section Background Options**, or on the container. Without one, the page shows through as the header slides. ![On Mouse Scroll Up Sticky below Sticky Menu in Extra Options](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-scroll-up-sticky.webp) Publish and scroll: the header hides while you scroll down and comes back when you scroll up. ## How It Behaves - A small scroll of a few pixels is ignored, so the header doesn’t flicker on tiny movements.- Sticky Menu fixes the **container (or outer section) that holds the Navigation Menu widget**, not just the widget. Everything in that container sticks with it, so keep your logo and buttons in the same container. ## Limitations - **Pro only.** Navigation Menu Lite has no sticky options.- **It needs Sticky Menu.** On Mouse Scroll Up Sticky only appears when Sticky Menu is on.- **The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.** ## Troubleshooting ### The header jumps or stops halfway Custom CSS or another plugin is also moving the header (position, transform or its own sticky setting). Remove it, and turn off Elementor’s own Sticky/Motion Effects on the same container. ### Other elements scroll over the header Raise the header container’s **Z-Index** in its Advanced tab. ## Related Docs - [Create a sticky menu](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/)- [Create a shrinking header](https://theplusaddons.com/docs/shrinking-header-effect-in-elementor/)- [Create a blurred glass sticky header](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/) ## Frequently Asked Questions **Q: What do I need before hiding the header on scroll down in Elementor?** A: The setup depends on the Navigation Menu widget from The Plus Addons for Elementor Pro, plus a header template where that widget sits with your logo and buttons in the same container. If you use the Default menu type, a WordPress menu under Appearance > Menus is also part of the setup. The key gotcha is that the free Navigation Menu Lite widget does not have this option, so the effect only exists in the Pro widget. **Q: How does the hide-on-scroll header behave when visitors scroll?** A: The header slides away as visitors scroll down and comes back as soon as they scroll up. A small scroll of a few pixels is ignored, which prevents flicker from tiny mouse movements. That behavior matters because Sticky Menu fixes the whole container or outer section, not just the menu widget, so your logo and buttons move together instead of separating on scroll. **Q: Why is my header not hiding on scroll in Elementor?** A: This effect only works when Sticky Menu is switched on first, because On Mouse Scroll Up Sticky appears below it. The page also needs to be checked on the published site, since the editor does not scroll like a visitor’s browser. If you are testing inside the editor, sticky behavior can look broken even when it works live. **Q: Why does the header jump or stop halfway when I scroll?** A: Custom CSS or another plugin is usually fighting the same container by changing position, transform, or adding its own sticky setting. Elementor’s own Sticky or Motion Effects can also interfere if they are enabled on that container. The clean fix is to remove competing movement rules so The Plus Addons for Elementor can control the sticky behavior without a second script pulling it in another direction. **Q: Why do other elements scroll over my sticky header?** A: That usually means the header container’s Z-Index is too low. Raising it in the Advanced tab puts the header above nearby content layers, which matters because sticky headers sit in normal page stacking order until you explicitly lift them. If text or sections overlap during scroll, Z-Index is the first thing to adjust. **Q: Should I use this effect instead of a sticky menu or shrinking header?** A: This effect is best when you want the header out of view while people read, but instantly available when they scroll back up. If you want a different behavior, The Plus Addons for Elementor also has [Create a sticky menu](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/), [Create a shrinking header](https://theplusaddons.com/docs/shrinking-header-effect-in-elementor/), and [Create a blurred glass sticky header](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/). That makes it easier to pick based on whether you want disappearance, resizing, or visual blur.