Elementor Sticky Header: Build One Without a Plugin

An elementor sticky header locks to the top of the viewport as visitors scroll and keeps navigation reachable from anywhere on the page. Build it without a plugin using Elementor Pro’s Motion Effects panel (Advanced > Motion Effects > Sticky: Top) or, for Elementor Free, a two-line CSS declaration in the section’s Custom CSS field. Both methods are covered here step by step, with every offset and device setting explained and a diagnostic sequence for the most common failure causes.

What You Need Before Setting Up an Elementor Sticky Header

Before configuring an elementor sticky header, confirm two things: whether your header is a Theme Builder template or output by your WordPress theme’s PHP files, and which version of Elementor you are running. These two facts determine which method applies. The most common reason sticky-header instructions fail in practice is applying steps written for a Theme Builder template to a theme-generated header, or the reverse.

A Theme Builder header is a template created under Templates > Theme Builder > Header in the Elementor admin. Elementor renders it on every page matching the template’s display conditions, and sticky settings applied in the template editor take effect sitewide. This workflow requires Elementor Pro.

A theme-generated header is output by your WordPress theme’s PHP files, not by Elementor. Elementor cannot apply Motion Effects or its Custom CSS panel to PHP-rendered HTML. Your best option is to switch to a blank-canvas theme such as the Hello Elementor theme, build a replacement header in Theme Builder, or add sticky CSS to your child theme’s stylesheet targeting the theme’s own header element class.

A page-level section or container is a header-style block inside a standard Elementor page rather than a Theme Builder template. Motion Effects apply here too, but sticky behavior only affects that single page. Most production sites use Theme Builder to keep the header consistent across the whole site.

The Motion Effects sticky controls in Method 1 are documented as part of Elementor Pro. If you are running Elementor Free with no plans to upgrade, go directly to Method 2. The CSS approach works in both versions without any plugin.

Method 1: Enable the Native Elementor Sticky Header Setting

Elementor Pro’s Motion Effects panel is the direct way to configure an elementor sticky header. According to Elementor’s official sticky-header guide, the control lives at Advanced > Motion Effects > Sticky: Top, and it provides device targeting, offset controls, and scrolling effects in one panel with no code required.

Follow these steps in the Elementor editor:

• Open the header template in the Elementor editor.
• Click the section or container handle to select the outermost wrapper, not an inner column or widget.
• Open the Advanced tab in the left panel.
• Expand Motion Effects.
• Set Sticky to Top.
• Under Sticky On, check the devices you want to target: Desktop, Tablet Portrait, and Mobile Portrait.
• Save the template and preview on the front end.

The four offset and position controls in the same panel let you fine-tune position after the element sticks. Elementor documents all four at the same location as the main sticky setting:

Setting	What it controls	Typical use case
Offset	Pixel gap between the viewport top and the stuck element	Compensate for a WordPress admin bar or a secondary fixed bar above the header
Effects Offset	Scroll distance before scroll-triggered visual effects fire	Shrinking header or background color change on scroll
Anchor Offset	Extra space above an anchor target so the sticky header does not obscure it	Single-page sites using in-page anchor navigation
Stay in Column	Constrains the stuck element to its parent column width	Multi-column layouts where a sidebar widget should not expand when stuck

Note: Elementor’s shrinking-header example uses a 90-pixel Effects Offset because that specific example header is 90 pixels tall. Use your actual header height as the starting value, not the figure from the tutorial.

If the Motion Effects panel does not appear in your editor, check whether Stretch Section is active on the section. Elementor’s documentation notes that disabling Stretch Section restores the Motion Effects controls. After enabling sticky, assign a z-index value to the header section in Advanced > Z-Index to keep it above hero images and other sections while stuck. Start between 100 and 200 and increase only if overlapping content appears. Very high z-index values can conflict with modal dialogs and accessibility focus overlays, so use the lowest value that works.

Method 2: Elementor Sticky Header CSS for Free Users

When Elementor Pro is not available, an elementor sticky header for Free users requires the position: sticky CSS property, a browser-native layout mode defined in the CSS position property on MDN. No plugin or JavaScript is needed, and it works in all modern browsers.

Two conditions must both be true for sticky positioning to work. First, no ancestor element between the header and the document body can have overflow: hidden or overflow: auto applied, because either value breaks the containing block relationship that sticky depends on. Second, the element must have an explicit top value. Omitting top defines the sticky mode but gives it no scroll threshold to activate at.

In the Elementor editor, assign a CSS ID to the header section under Advanced > CSS ID (for example, site-header). Then go to Advanced > Custom CSS and paste:

#site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
}

A CSS ID is more stable than targeting Elementor’s generated classes, which can change after template edits. After applying the CSS, set top padding on your first content section equal to the header’s height. This prevents the sticky bar from overlapping your hero or intro block on initial page load. Set it in the first section’s Advanced > Padding > Top field in the Elementor editor.

When you want the header background to appear only after the visitor starts scrolling, Elementor appends the class elementor-sticky--active to the section the moment it enters its stuck state. You can use that class to add a background and shadow with no JavaScript at all:

#site-header.elementor-sticky--active {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

This selector fires the moment the header enters sticky state and reverts when the page scrolls back to the top. It works for both the CSS method and the Elementor Pro native approach.

Elementor Sticky Header Not Working: Diagnostic Steps

When an elementor sticky header refuses to stick, five configuration issues account for nearly all failures. Check parent overflow and Stretch Section first, as those two causes are most common and take under a minute to verify in the editor.

1. Parent container overflow. Any ancestor element with overflow: hidden or overflow: auto breaks sticky positioning for both the native Pro method and the CSS fallback, with no browser error. Open DevTools, select the header element, and inspect every parent up to the body tag. The CSS z-index and stacking rules on MDN explain how the same containing block that breaks sticky can also discard your z-index settings. Remove or override the overflow rule on the offending ancestor.

2. Stretch Section is enabled. In Elementor Pro, activating Stretch Section on a section hides the Motion Effects panel entirely. Open the section’s Layout tab and turn off Stretch Section. The Motion Effects controls reappear immediately. If you need a full-width header background, apply it to an inner container element and leave the outermost wrapper unstretched.

3. Z-index conflict. A hero image, full-screen slider, or popup can render on top of the sticky header if it holds a higher z-index or creates its own stacking context. Set a z-index on the header section and check all other sections for competing values. Keep the header’s z-index as low as it needs to be to avoid future conflicts with overlays and accessibility dialogs.

4. Theme header overlap. If your WordPress theme outputs its own PHP header alongside an Elementor Theme Builder header, both elements render on the page. Elementor’s sticky settings only affect the element Elementor renders. Configure your theme to disable its built-in header output, which most lightweight Elementor-compatible themes provide as a display toggle.

5. Stale CSS cache. Elementor caches its generated stylesheets. After any sticky change, go to Elementor > Tools > Regenerate Files and Flush CSS, then clear your browser cache and any page-caching plugin before retesting. Changes that appear to have no effect are very often already applied but being served from a cached file.

Responsive Settings for an Elementor Sticky Header on Mobile

Elementor’s Sticky On control lets you enable or disable the sticky header independently for Desktop, Tablet Portrait, and Mobile Portrait, so you can keep the header non-sticky on phones while it remains sticky on larger screens. This is the direct solution when a sticky bar consumes too much vertical space at small sizes.

In the Motion Effects panel, uncheck Mobile Portrait to disable stickiness on phones. From what I have seen in practice, enabling sticky for Desktop and Tablet Portrait, then evaluating Mobile Portrait based on the header’s actual pixel height at that breakpoint, is a sensible starting point.

For the CSS method, add a media query override in your child theme’s stylesheet or in the section’s Custom CSS panel:

@media (max-width: 767px) {
  #site-header {
    position: relative;
    top: auto;
  }
}

The 767-pixel breakpoint matches Elementor’s default mobile threshold. If you have defined a custom breakpoint under Elementor > Site Settings > Layout, replace 767 with your actual value.

Test the elementor sticky header on a physical mobile device, not only in browser DevTools. Mobile browsers raise and lower the browser chrome as you scroll, changing available viewport height in ways DevTools does not replicate. Open the page on a real phone, scroll until the chrome slides away, and confirm the header remains visible without jumping or flickering.

A permanent sticky bar also affects keyboard and touch navigation. The WCAG 2.2 focus-visible guidance specifically addresses how fixed overlays can trap or hide keyboard focus targets. Verify that every interactive element below the header remains reachable by keyboard, and confirm that dropdown menus triggered from the header open downward without clipping behind the sticky bar.

Building an elementor sticky header without a plugin requires choosing the right method for your Elementor license and header construction. Elementor Pro users with a Theme Builder header use Motion Effects > Sticky: Top for device targeting, offset controls, and scroll effects in one panel. Elementor Free users and sites with theme-generated headers use CSS position: sticky with a defined top value and no additional tools. When something goes wrong, check parent overflow rules and Stretch Section first, as those two issues account for most failures. Confirm the final result in an incognito window on a real phone so logged-out visitors see exactly what you configured in the editor.

Prices, limits and product capabilities were checked on 2026-10-08 and change without notice. Nothing here is a prediction of results for your list, domain or market.