How to Create a Shrinking Header on Scroll Down Using Elementor

Updated: November 27, 2020

The pro version of Elementor 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 Add New button to create a new template.

Set the template to Header and give the template a name. Click CREATE TEMPLATE button to start creating the header template.

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.

Originally posted on: November 27, 2020

This page may contain affiliate links, which help support WP Pagebuilders.

Building a website is as fun as playing puzzle with Elementor

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.