Elementor Shrinking Sticky Header Tutorial – Easy Step By Step No Plugin

Add a professional-looking sticky shrinking header to your WordPress site using only Elementor Pro native settings. No extra code or plugins needed.

Highlighted Links.

Get your Elementor Pro license

I recommend "Advanced Solo" or higher

Transfer your websites to Hostinger

Get 10% off with WPROADS coupon

Thanks in advance for using the affiliate links I am sharing here and in other parts of my website. When you click on these links and you make a purchase I might earn a small commission. The price for you is the same but you will support my work.

How to Create a Sticky Shrinking Header in Elementor Pro (No Extra Plugins!)

Want to add a professional-looking sticky shrinking header to your WordPress site using only Elementor Pro? You're in the right place. In this step-by-step tutorial, you'll learn exactly how to create a responsive, animated header that shrinks smoothly as users scroll — all without a single extra plugin or line of JavaScript!

Whether you're building a landing page, blog, or eCommerce site, this technique will help you elevate your site's user experience with a modern, clean look.

✨ What You'll Learn

How to make your Elementor header sticky
How to apply scroll-triggered shrinking animations to your logo, menu, and call-to-action buttons
How to use custom CSS for refined padding and background transitions
How to keep everything fully responsive across desktop and mobile

🧱 Step 1: Set Up a Sticky Header in Elementor

Open the Theme Builder and edit your header.
Select the main container.
In the Advanced tab, set all margins and paddings to 0.
Scroll to Motion Effects and enable Sticky: Top.
Set an Effects Offset of 100 (this value controls when the sticky effect activates).

✅ Preview your page now — your header should stick to the top beautifully!

🔍 Step 2: Add the Shrinking Effect to the Logo

Select the Logo widget.
Go to Advanced > Motion Effects > Scrolling Effects.
Enable Scale and choose Scale Up.
Set the scale value to -2.
Set the Viewport Bottom range from 0% to 4%.
Choose Effects Relative To: Entire Page.

This makes your logo shrink smoothly as the user scrolls!

🧭 Step 3: Apply the Same Effect to Menu and Buttons

Repeat the same steps for your Navigation Menu and Call-to-Action Button:

Enable Scale > Scale Up
Use -2 as the scale value
Set the viewport range to 0–4%
Don’t forget to select “Effects relative to entire page”

Your entire header is now fully responsive and animated with clean shrinking transitions.

🎯 Optional: Align Logo & Buttons Perfectly

Sometimes, the logo or buttons may shift slightly inward when shrinking.

To fix this:

Go to Advanced > Motion Effects
Set the Anchor Point:
- Logo: Left
- Button: Right

This ensures alignment stays clean and consistent during scroll.

🎨 Step 4: Add Smooth Transitions with CSS

To further refine your header design, let’s add some custom CSS for smooth transitions and background color change:

🏷 Assign a Class to Your Header:

Name it: sticky-header

✏️ Add CSS in Elementor > Advanced > Custom CSS

/* Normal State */
.sticky-header {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  transition: all 0.3s ease-in-out !important;
}

/* Sticky State */
.sticky-header.elementor-sticky--effects {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  background-color: var(--e-global-color-primary);
}

✅ Use Elementor Global Colors to keep your site design dynamic and consistent.

📱 Mobile Friendly? Absolutely!

This entire sticky shrinking header setup works beautifully on mobile too. Use browser developer tools to test responsiveness or preview from Elementor’s responsive mode.

🎯 Enhance your Elementor knowledge

📺 Watch my full Elementor video tutorial here:
👉 Elementor Pro Tutorial 2025

👍 Help me hit 50 likes! If this tutorial helps you, show some love by smashing the thumbs up button!

💬 Let’s Hear from You!

What did you think of this technique?
👇 Comment “Elementor Lover” below to let me know you followed along!

📦 Featured Resources

🔥 Join the FREE WP Roads Community
Connect with like-minded WordPress creators:
👉 https://wproads.com/community

🚀 Boost Your Site with These Tools
Discover what I use daily to build fast, flexible sites:
👉 https://wproads.com/tools

🎥 Related Tutorials

🛠 My Favorite Tools

👋 Stay Connected

🧑‍💻 About Me

Hi, I’m Pascal, the creator of WP Roads. I love helping WordPress users like you build stunning, functional websites using Elementor and other powerful tools. Let’s create something amazing together!

⚠️ Affiliate Disclosure

Some links in this post are affiliate links. If you make a purchase through them, I may receive a commission — at no extra cost to you. Thank you for supporting WP Roads!

💡 Final Thoughts

Creating a sticky shrinking header in Elementor Pro is easier than ever with this simple yet powerful approach. No plugins. No heavy coding. Just Elementor’s built-in features and a little creative styling.

Ready to level up your WordPress design game?
👉 Watch the full tutorial here

Happy Elementor building! 🚀

Pascal Claro

WordPress enthusiast, founder WP Roads. Happy husband and father based in Paris. I love latest news, tutorials, reviews and online courses ... all about WordPress!