Create Header Sticky

How to Create a Shrinking Header With Elementor

Once you have your regular header ready to go, this section will cover how to make it shrink.

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.

1. Edit Your Header Template in Elementor

To get started, use Elementor Theme Builder to edit the template for your header.

In your WordPress dashboard, go to Templates → Theme Builder and click Edit With Elementor for your header template.

2. Perform Some Basic CSS Housekeeping

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.

First, open the settings for the section that contains your header.

In the Layout tab, set the HTML Tag drop-down equal to header:

Also in the Layout tab, make sure there’s no Minimum Height set, set the Vertical Align to Middle, and then set Columns Gap to No Gap to avoid unnecessary padding. Tip: Avoid using top/bottom padding under Advanced.

Then, go to the Advanced tab and Set Up Motion Effects to Make Your Header Stick

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

Open the settings for the section that contains your header. Then, go to the Advanced tab and open the Motion Effects settings:

• Set the Sticky drop-down equal to Top.

• Make sure that the Sticky On box only includes Desktop – you’ll need to delete the other devices.

• Set the Effects Offset equal to 90 (to your header’s height).

Note: To disable the header sticky, you should change the value of Sticky to None