How Do I Make My Elementor Header Sticky?
How Sticky Headers Work
The Sticky setting, found under the Advanced tab of the header's outer container or section within a Theme Builder header template, uses CSS positioning to keep that element fixed relative to the viewport once the page scrolls past its original position. Elementor's implementation includes options for effective range (the whole page or a set distance) and can be limited to specific devices if a sticky header isn't wanted on mobile.
Things to Check When Setting This Up
- Content overlap beneath the sticky header, since a fixed-position header can sit on top of content unless the page's top spacing accounts for the header's height.
- Anchor links landing behind the sticky header, a common side effect requiring a scroll offset adjustment so jump links don't land with content hidden beneath the fixed header.
- Sticky behavior on mobile may need to be disabled or configured differently, since a sticky header takes up permanent screen space that's more valuable on a small viewport.
- This is a Pro-only, Theme Builder feature — free Elementor users would need a separate plugin or custom CSS/JS for equivalent sticky behavior.
Setting Up a Sticky Header
- Select the header's outer container within its Theme Builder template and open the Advanced tab.
- Enable Sticky and configure its effective range and device visibility.
- Adjust top page spacing and anchor link offsets to account for the fixed header's height.
- Test scrolling behavior across breakpoints, disabling sticky on mobile if it doesn't suit the design there.
Need a sticky header or navigation feature built and tested properly? See Elementor customization.