To make a sticky header in Elementor, open your header template, select the outer container, go to Advanced, Motion Effects, set Sticky to Top and choose the devices. Add an offset if needed, and use “Effects Offset” to change the background or shrink the logo after scrolling. On mobile, keep the sticky header short so it does not cover content.
- Sticky is set in Advanced, Motion Effects.
- Apply it to the outer header container.
- Use scroll effects to shrink or change background.
- Keep mobile sticky headers compact.
- Check that anchor links are not hidden under the header.
How do you make the header sticky?
- Edit the header in Theme Builder.
- Select the outer container.
- Advanced, Motion Effects, Sticky: Top.
- Sticky On: Desktop, Tablet, Mobile as needed.
- Set Effects Offset (for example 80px) for scroll changes.
How do you shrink it on scroll?
| Effect | How |
|---|---|
| Change background | Add a class and CSS for the elementor-sticky–effects state |
| Shrink logo | CSS reducing logo width in the sticky state |
| Add shadow | Box shadow in the sticky state |
| Transparent to solid | Transparent initially, solid colour when sticky |
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
What common problems happen?
Imagine clicking a menu link to #pricing, and the heading lands hidden under the sticky header. Add a scroll offset (scroll-margin-top in CSS, or the anchor offset setting) equal to the header height. Also avoid sticky headers taller than about 80px on phones; they eat the screen. Learn the CSS states in Elementor custom CSS.
Want to learn Elementor faster with a tutor?
I teach WordPress and Elementor 1-to-1 over Zoom or Google Meet, on your own website, at your pace. Lessons start at $40, every lesson is recorded so you can rewatch it, and you get a short checklist afterwards. Beginners, business owners, students and freelancers are all welcome. See lessons and prices or book a free intro call.
Frequently asked questions
How do I make a header sticky in Elementor?
Select the header container, go to Advanced, Motion Effects and set Sticky to Top.
How do I shrink the header on scroll?
Use Effects Offset and CSS targeting the sticky effects state to reduce padding and logo size.
Why do anchor links hide under my sticky header?
Add scroll-margin-top or an anchor offset equal to the header height.
Should the header be sticky on mobile?
It can be, but keep it compact so it does not cover content.
Sources
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
More WordPress guides
Guide, 3 min readWordPress and Elementor Tutoring: Your Questions Answered
Guide, 3 min readWordPress Multisite Explained: Who Needs It (and Who Does Not)
Guide, 3 min readWordPress Comments and Spam: Settings That Keep Your Site Clean
Guide, 3 min readHow to Move WordPress to HTTPS (SSL) and Fix Mixed ContentRather have an expert run your WordPress site?
Tanvir H is a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience, 650+ projects and a 4.9 client rating. New websites, redesigns, fixes, speed, security and SEO, handled by one expert who explains everything in plain English and works with clients worldwide.
