Elementor Pro’s Theme Builder includes a built-in sticky header option that requires no code or additional plugins. If you are using a third-party theme with Elementor (not Elementor’s own Theme Builder), the process is slightly different. This guide covers both approaches.
Method 1: Elementor Pro Theme Builder (Recommended)
This method only works if you have built your header using Elementor Pro’s Theme Builder.
Go to Templates -> Theme Builder -> Header. Open your header template in the Elementor editor. Click on the Section (or Container, in newer Elementor versions) that wraps your entire header. In the Advanced tab, find Motion Effects. Under “Sticky”, select Top from the dropdown. The header is now sticky.
Configure the sticky options that appear:
- Effects Offset – how many pixels to scroll before the sticky activates
- Stay In Column – keep enabled for headers
- Sticky On – select which devices show the sticky header (Desktop, Tablet, Mobile)
Need help with your WordPress site? Describe your project and get a free estimate.
Shrink on Scroll Effect
To make the sticky header smaller than the original header (a common UX pattern), use Elementor’s scroll-based animation. With the header section selected, go to Advanced -> Motion Effects -> Scroll Effects. Add a “Height” effect that starts at your full header height and ends at a smaller height over the first 200px of scroll. This creates a smooth shrink transition as the visitor scrolls.
An alternative approach using CSS classes: add a CSS class to the section (e.g., “shrink-header”) and use custom CSS to define the sticky state:
.elementor-sticky--active.shrink-header {
padding-top: 8px !important;
padding-bottom: 8px !important;
background-color: rgba(255,255,255,0.97);
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}Method 2: Third-Party Theme With Elementor
If you use Elementor as a page builder with a theme that controls the header (Astra, OceanWP, GeneratePress), enable sticky header in the theme’s settings rather than Elementor. Each theme has its own sticky header option:
- Astra – Customizer -> Header -> Sticky Header
- OceanWP – Theme Panel -> Header -> Fixed Header
- GeneratePress – Customizer -> Navigation -> Sticky Navigation
Fixing Z-Index Issues
After enabling a sticky header, you may find dropdowns or other elements on the page appearing on top of the header. This is a z-index conflict. In the sticky header section settings, go to Advanced -> Z-Index and set it to 100 or higher. If specific elements still appear on top, lower their z-index or increase the header’s further.
Transparent Header That Becomes Solid on Scroll
A popular pattern on portfolio and marketing sites: the header is transparent over a full-screen hero and becomes a solid color when the visitor scrolls. In Elementor, set the section background to transparent or rgba(0,0,0,0) for the normal state. Then use the .elementor-sticky–active class to apply a solid background in the scrolled state:
.elementor-sticky--active.my-header-section {{
background-color: rgba(255, 255, 255, 0.97) !important;
backdrop-filter: blur(8px);
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}}Add the custom class “my-header-section” to your header section in the Advanced tab, then add this CSS to Elementor’s global Custom CSS or your theme’s stylesheet. The backdrop-filter creates a frosted glass effect on modern browsers.