--- title: "How to Create a Sticky Header in Elementor (With Scroll Effects)" url: https://theplusaddons.com/blog/sticky-header-in-elementor/ date: 2026-07-02 modified: 2026-07-02 author: "Aditya Sharma" description: "Say you land on a long homepage. You scroll past the hero, into the features, down toward pricing, and somewhere along the way the menu you needed has scrolled off..." image: https://theplusaddons.com/wp-content/uploads/2026/07/po0gc1-1024x538.jpg word_count: 1499 --- # How to Create a Sticky Header in Elementor (With Scroll Effects) Say you land on a long homepage. You scroll past the hero, into the features, down toward pricing, and somewhere along the way the menu you needed has scrolled off the top of the screen. Now you are flicking back up just to find the "Contact" link. A sticky header fixes that. It keeps your navigation in view as the page moves, so the way out is always one click away. The better versions do more than sit there. They react. The bar can shrink as you scroll, turn transparent over a hero image, blur the content behind it, swap to a smaller logo, or slide away when you scroll down and reappear the moment you scroll back up. This guide walks through what a sticky header is, what Elementor gives you out of the box, and how to build one with real on-scroll effects using The Plus Addons for Elementor. Table Of Contents ## What a sticky header is, and when it earns its place A sticky header is a navigation bar that stays fixed to the top of the viewport while the rest of the page scrolls underneath it. Instead of living only at the top of the document, it travels with the reader. The payoff is simple: your menu, search, and main call to action stay reachable no matter how far down someone has gone. That matters most on pages where people scroll a lot. Long-form landing pages, documentation, blog posts, and stores all benefit, because the next step is never more than a glance away. It is worth being honest, though: a sticky header is not free real estate. On small phone screens a tall fixed bar eats into the content people came to read. The trick is to keep it, but make it lighter as they scroll, which is exactly where scroll effects come in. ## The honest state of sticky headers in Elementor Here is the part most tutorials skip. What you can do depends heavily on which version of Elementor you run. On the **free version**, you cannot build a custom site header at all. Header and footer building lives in the Theme Builder, which is a Pro feature, so free users are left with CSS tweaks or a third-party plugin to get a header that sticks. On **Elementor Pro**, sticky behavior is built in. You select your header container, open Advanced, expand Motion Effects, and set Sticky to Top. You can choose which devices it sticks on and set an anchor offset so linked sections do not hide behind the bar. Elementor also documents how to shrink the header as you scroll, though that takes a little extra setup. That covers the basics well, and for a lot of sites it is enough. ![Elementor shrinking sticky header on scroll](https://theplusaddons.com/wp-content/uploads/2026/07/fNmocbfR0qCEw0uhWRe4L14hawxtZh8ZoOXDUezUQwuXceXg2M7GQ7UC56plbMGrHR-Sgd-cgN9P6OgjiJ4cSQ-scaled.png)Elementor Pro's native shrink-on-scroll effect reduces the header height as you move down the page. Source: elementor.com Where the native option runs thin is the reactive stuff. Turning the bar transparent over a hero, blurring what sits behind it, changing the menu color once it sticks, swapping the logo, or hiding the header on scroll down and revealing it on scroll up: those take custom code or an add-on. If a plain fixed bar is all you want, Elementor Pro handles it. If you want the header to feel designed, read on. ## The part a basic sticky header misses: on-scroll effects When people say they want a "nice" sticky header, they usually mean one that responds as they scroll. These are the effects that make the difference: - **Transparent on load, solid on scroll.** The header sits transparent over a full-width hero, then fades to a solid background once the reader moves down the page. - **Glassmorphism or blur.** The bar stays semi-transparent with a frosted blur, so content behind it is hinted at rather than hidden. - **Change menu color on scroll.** Light text over a dark hero flips to dark text once the header turns solid, so it stays readable. If you are wrestling with menu colors in general, our guide on [how to change menu color in WordPress](https://theplusaddons.com/blog/how-to-change-menu-color-in-wordpress/) is a useful companion. - **Shrink on scroll.** The header trims its height and padding as you go, giving more room to the content. - **Hide on scroll down, show on scroll up.** The bar slides out of the way while reading and returns the instant someone scrolls back, which is ideal on mobile. - **Logo swap.** A large logo at the top becomes a compact mark once the header sticks. ![The Plus Addons header effects for Elementor](https://theplusaddons.com/wp-content/uploads/2026/07/vGhv0dyEF151xO8OIEWvW94OqK37_5tG5ZIKlZkZf-ANUwPuu7VjnVwFfhnrPYe7aY5R7rlPpWldxGfezjGjHA-scaled.png)The Plus Addons Header Effects: transparent-on-scroll, blur, color change, shrink, hide-on-scroll and logo swap. None of these are decoration for the sake of it. Each one is solving the same tension: keep navigation available without letting the header crowd the page. ## How to build a sticky header with scroll effects using The Plus Addons The Plus Addons for Elementor adds a full Header Builder, available in its Pro plan, plus the header effects the native option leaves out, and it drives them from the widget panel instead of custom code. You do not need Elementor Pro for any of this, it works with both the free and Pro versions of Elementor. Here is the flow. - **Build the header.** Create a [header template in Elementor](https://theplusaddons.com/blog/create-header-footer-in-elementor/) with The Plus Addons Header Builder and drop in the Navigation Menu widget for your menu, logo, and any header extras like search or a cart. - **Turn on Sticky Menu.** In the Navigation Menu widget, open the **Sticky Menu** options and enable **Sticky**. This is what fixes the header to the top as the page scrolls. - **Add the reactive effects.** Use **On Mouse Scroll Up Sticky** so the bar hides on the way down and returns on the way up, and turn on **Blur** for the glassmorphism look. Set the sticky-state colors so the menu stays readable once the header turns solid. - **Shrink it as it sticks.** Adjust **Sticky Padding** and **Sticky Width** so the header trims down once fixed, which gives you the shrink-on-scroll effect without touching CSS. - **Handle mobile separately.** Enable **Sticky Mobile Menu** and set a lighter sticky state for small screens so the bar does not swallow the viewport. ![The Plus Addons Header Builder for Elementor](https://theplusaddons.com/wp-content/uploads/2026/07/i8eNd9ng2ZRRxpxU7h55h4eUZOHwdHTYLHvwUi4ak3i5G0h-ORPq22-mY_UYb7C7bmCSavNDmbWFtN0WWCaq_g-scaled.png)The Plus Addons Header Builder, where the Sticky Menu and scroll effects are configured from the widget panel. Because these are widget controls rather than snippets, you can see the result live in the editor and adjust as you go. The same Header Builder also covers transparent headers and logo swaps, so the full set of effects lives in one place. ## Get the offset and anchor right The most common sticky-header bug is content hiding behind the bar. Someone clicks a "Pricing" [anchor link](https://theplusaddons.com/blog/add-elementor-jump-to-section-with-anchor-links/), the page jumps, and the pricing heading is tucked under the fixed header. The fix is an anchor offset that accounts for the header height, so linked sections land just below the bar rather than under it. Set it once, test every in-page link, and re-check after you shrink the header, since the sticky height changes the offset you need. ## Make it behave on mobile A fixed header that looks tidy on desktop can dominate a phone. Keep the mobile sticky state short, lean on the hide-on-scroll-down behavior so reading space opens up, and make sure the menu toggle and any icons stay large enough to tap. Test on a real device, not just the editor preview, because touch behavior and viewport height rarely match what you see on a desktop screen. ## Keep it fast: sticky headers and layout shift A sticky header can quietly hurt your [Elementor Core Web Vitals](https://theplusaddons.com/blog/elementor-core-web-vitals/) if it is built carelessly. The usual culprit is layout shift: the header changes height as it sticks and pushes the content below it, which registers as movement Google can measure. Reserve the space the header needs, avoid heavy background images inside the bar, and keep the blur and transition effects lightweight. If your build already feels heavy, it is worth checking whether [Elementor is slowing down your website](https://theplusaddons.com/blog/does-elementor-slow-down-your-website/) before you blame the header. Done well, a sticky header adds no measurable weight to the page. ![Elementor Core Web Vitals guide](https://theplusaddons.com/wp-content/uploads/2026/07/T25u7DPDbgnoF_veZEluvRVhVR3mhPn8OQIBlWIVpPhrhfkGlPXLvHKi6Eg7t1IFot6xKojouYzD9N7k0Q3pLw-scaled.png)Build the sticky header carefully so it does not trigger layout shift and hurt Core Web Vitals. ## Which route should you take? If you are on Elementor Pro and all you need is a header that sticks to the top and maybe shrinks, the built-in Motion Effects setting does the job with no extra plugins. The moment you want the header to feel designed, transparent over a hero, blurred, color-aware, hiding and returning as people scroll, The Plus Addons Header Builder, part of its Pro plan, gives you those effects from the panel whether you run Elementor free or Pro, without writing a line of CSS. [Build your sticky header with The Plus Addons](https://theplusaddons.com/elementor-builder/header-builder/) ## Suggested reading - [How to create a header and footer in Elementor](https://theplusaddons.com/blog/create-header-footer-in-elementor/) - [How to use Elementor header templates](https://theplusaddons.com/blog/how-to-use-elementor-header-templates/) - [How to build a mega menu in Elementor](https://theplusaddons.com/blog/build-mega-menu-on-elementor/) - [How to create one-page navigation in Elementor](https://theplusaddons.com/blog/create-one-page-navigation-in-elementor/) - [Elementor and Core Web Vitals: how to keep your site fast](https://theplusaddons.com/blog/elementor-core-web-vitals/)