{"id":41551,"date":"2020-08-12T09:21:39","date_gmt":"2020-08-12T09:21:39","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=41551"},"modified":"2025-12-03T23:32:40","modified_gmt":"2025-12-03T21:32:40","slug":"shrinking-sticky-header","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/shrinking-sticky-header\/","title":{"rendered":"How to Create a Shrinking Sticky Header With Elementor"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Interested in creating a shrinking header on your WordPress site? That is, a header that “shrinks” as a visitor starts scrolling down the page?<\/p>

Beyond just plain looking cool, this effect gives you more space for the rest of your content, so it’s worth considering if it would be a useful addition to your website.<\/p>

In this post, we’ll show you step-by-step how to use Elementor Pro to create a shrinking header on your WordPress site. While you will need to use some custom CSS<\/a> to get the job done, we’ll walk you through how to modify it according to your needs.<\/p>

Here’s an example of what you’ll be able to create by following this tutorial:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

What is a Shrinking Header?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

As you saw in the short animation above, a shrinking header does pretty much exactly what the name suggests.<\/p>

It starts with a regular top header. Then, as a user starts scrolling down the page, the header “shrinks” to become a bit smaller – you can control the degree to which it shrinks and also change how transparent it becomes.<\/p>

The key thing to note is that the header is still visible even as a user scrolls down the page – it’s just smaller. This is different from some other approaches, like completely hiding the header as a user scrolls down and only displaying it when a user scrolls up.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

What are the Benefits Of a Shrinking Header on Scroll?\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The biggest benefit of a shrinking header is that you get more space for your main content. It also puts some more emphasis on your main content because you don’t have your site’s full header competing for a visitor’s attention.<\/p>

At the same time, though, you’re still able to give users access to your full navigation menu at all times, which you wouldn’t be able to do if you completely hide the header when a user scrolls down.<\/p>

In a way, you kind of get the best of both worlds \u2014 more space for your content while still being able to offer your full navigation menu.<\/p>

Finally, this effect also just generally looks cool and offers some nice eye candy for your visitors as they interact with your website.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

What You'll Need to Follow This Tutorial\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

For this tutorial, we’ll assume that you’ve already created your “normal” header<\/a> using Elementor Theme Builder<\/a> (which is available in Elementor Pro<\/a>).<\/p>

Basically, you’ll want to have already created the header that visitors will see when they first land on your page (before they start scrolling down). Then, we’ll show you how to make it shrink!<\/p>

We’ll also assume that your header already has a logo and some navigation items.\u00a0<\/p>

Check out this help article<\/a> if you’re not sure how to create your header with Elementor Theme Builder. You can also use one of Elementor Pro’s pre-built header templates, which is what we’re going to do for this tutorial. Specifically, we’re going to use the header from the Digital Agency template kit<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Want To Create Sticky Sidebar Navigation Instead?<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

How to Create a Shrinking Header With Elementor\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Once you have your regular header ready to go, this section will cover how to make it shrink.<\/p>

To create this effect, you’ll rely heavily on some custom CSS. However, we’ll give you the exact code that you need and walk you through customizing it to match your site.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

1. Edit Your Header Template in Elementor\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To get started, use Elementor Theme Builder to edit the template<\/a> for your header.<\/p>

In your WordPress dashboard, go to Templates \u2192 Theme Builder<\/strong> and click Edit With Elementor<\/strong> for your header template.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

2. Perform Some Basic CSS Housekeeping\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To make sure your header works with the CSS code that you’ll use in the next sections, you’ll want to perform a little housekeeping.<\/p>

First, open the settings for the section that contains your header.<\/p>

In the Layout<\/strong> tab, set the HTML Tag<\/strong> drop-down equal to header<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Also in the Layout<\/strong> tab, make sure there’s no\u00a0<\/b>Minimum Height set, set the Vertical Align<\/b> to Middle<\/b>, and then set Columns Gap<\/b> to No Gap<\/b> to avoid unnecessary padding. Tip<\/strong>: Avoid using top\/bottom padding under Advanced.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Vertical\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Then, go to the Advanced<\/strong> tab and set the header section’s CSS Classes<\/strong> equal to sticky-header<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Finally, open the image widget that contains your logo and go to the Advanced<\/strong> tab. Then, set your logo image’s CSS Classes<\/strong> field equal to logo<\/strong>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

3. Set Up Motion Effects to Make Your Header Stick\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To make sure your header sticks to the top as users start scrolling, you can use Elementor’s Motion Effects<\/strong> feature.<\/p>

Open the settings for the section that contains your header. Then, go to the Advanced<\/strong> tab and open the Motion Effects<\/strong> settings:<\/p>