Elementor Pro comes with a theme builder feature in which you can use it to create custom templates of your theme. One of the custom templates you can create is the header template. Creating a custom header template using Elementor, you can apply any style or behavior you like. From the one that automatically hides on scroll down to the one that shrinks on scroll down. In this article, we will show you how to create a header that shrinks on scroll down as shown on the GIF below.
Elementor has no default setting options to create a header behavior like the one above. To create that kind of header type, you need to add a custom CSS to your header. Have no CSS knowledge? No worries. We will share the CSS code you need and explain some properties you can modify.
How to create a shrinking header on scroll using Elementor
If you are new to Elementor, you can read our previous article to learn how to create a custom header using Elementor. Or, if you have been using Elementor for a quite while and already have a custom header, you can edit it to apply the shrinking behavior. In this article, we will create a new header. Instead of creating the header from scratch, we will use one of the available premade templates. Let’s get started.
First off, go to Templates -> Theme Builder on your WordPress dashboard. Click the plus icon on the Header label on the left panel.
On the appearing templates library, choose a premade template you like from the appearing template library. If you want to create the template from scratch instead, you can simply close the template library. As said above, we will use a premade template. More precisely, we will use the premade header template of the Digital Agency template kit. Click the INSERT button to import the premade template to the canvas area.
Go to the settings panel on the left side. On the Layout block under the Layout tab, set the Minimum Height to 90 and the HTML Tag to header.
Next, go to the Advanced tab. On the Advanced block, add a CSS class on the CSS Classes field. You can use the sticky-header class.
Open the Motion Effects block and make sure the Sticky option is set to Top. You need to disable the header on the tablet and mobile (simply delete the Mobile and Tablet option on the Sticky On field). Set Effects Offset to 90.
Still on the Advanced tab, open the Custom CSS block and paste the following CSS code.
header.sticky-header {
–header-height: 90px;
–opacity: 0.90;
–shrink-me: 0.80;
–sticky-background-color: #0e41e5;
–transition: .3s ease-in-out;
transition: background-color var(–transition),
background-image var(–transition),
backdrop-filter var(–transition),
opacity var(–transition);
}
header.sticky-header.elementor-sticky–effects {
background-color: var(–sticky-background-color) !important;
background-image: none !important;
opacity: var(–opacity) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
transition: min-height var(–transition);
}
header.sticky-header.elementor-sticky–effects > .elementor-container {
min-height: calc(var(–header-height) * var(–shrink-me))!important;
height: calc(var(–header-height) * var(–shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
transition: padding var(–transition);
}
header.sticky-header.elementor-sticky–effects .elementor-nav-menu .elementor-item {
padding-bottom: 10px!important;
padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
transition: max-width var(–transition);
}
header.sticky-header.elementor-sticky–effects .logo img {
max-width: calc(100% * var(–shrink-me));
}
Some properties on the CSS code above that you need to notice are:
- header-height: This property is used to control the height of the header (which set to 90px in this example). If you want to change the value, make sure to change both values: on the CSS code and on the header section’s settings.
- opacity: This property is used to control the degree to which your shrinking header is transparent. You can use a value between 0 to 1. In this example, we use the value 0.90.
- shrink-me: This property is used to control the degree to which your header and logo shrink when a visitor starts to scroll down. You can use the value between 0 to 1. We use the value 0.80 in this example. This value will make your header and logo shrink to 80 percent from the initial size.
- sticky-background-color: This property is used to control the color of the shrunken header (the header that appears when a visitor scrolls down). You can use a color name (i.e. red) or the hex code of the color. In this example, we use the hex code of 0e41e5 which represents blue.
- transition: This property is used to control how long it takes for the header to shrink from its initial size.
Lastly, before you publish/update your header, click the widget that contains your site logo (we use the Image widget in this case) to edit it. Go to the Advanced tab and add the CSS class logo on the CSS Classes field. This will make your logo shrinks as well when users scroll down.
That’s it. You can now publish/update your header.
The bottom line
The ability to add custom CSS allows you to apply certain styling options that are not offered by Elementor by default. So basically, you technically have limitless styling options to apply.