How to Change Header on Page Scroll in Elementor

Updated: June 3, 2022

There are many header behaviors you can achieve with Elementor Pro. One of which is by changing a header with another one on page scroll. This article will show you how.

Elementor Pro, as you have known, comes with a Theme Builder feature to allow you to create a custom header on your WordPress site. Thanks to this feature, you no longer need to rely on what’s offered by your theme regarding header customization, which mostly limited. You can add any element you like, use any typography setting you want, and set any behavior to your liking.

Elementor Pro has a built-in setting option to add a sticky header. We will make use of this feature to create a changing header on page scroll. Custom CSS is also needed for this kind of header behavior. Here is the example of the changing header on page scroll.

Step 1: Create the Custom Header

Before getting started, make sure you have upgraded your Elementor to the pro version as Theme Builder is only available on Elementor Pro. You can get the pro version of Elementor Pro on its official website.

Once you are ready, go to Templates -> Theme Builder on your WordPress main dashboard. On the Theme Builder dashboard, hover your cursor over the Header tab and click the plus icon to create a new header template.

On the appearing template library, you can select a pre-made header template you like. Or, if you want to create the header from scratch instead, you can simply close the template library to open the Elementor editor. In this article, we will create the header template from scratch.

Start creating your header by adding a section and then add the necessary elements and make the stylings accordingly.

Once done adding the necessary elements and making the stylings, go to the Advanced tab. Under the Advanced settings block, set the Z index to 100 and add CSS class header-1.

Next, duplicate the section of the header you have just created above. The duplicated section will be your second header, which will appear when the page is scrolled down.

Edit the duplicated header. You can add other elements or remove the existing ones. You can also change the background. Anything you want. Once done editing, go to the Advanced tab. Under the Advanced settings block, rename the CSS class to header-2.

Next, open the Motion Effects block. On the Sticky dropdown, set to Top. You can set the effects offset on the Effects Offset field. The value you set here will determine the scrolling depth before the effect (sticky in this case) takes place.

Once done editing both sections of the header, change the order of them.

Edit the lower section and set the negative margin to make it lies above the upper section. To do so, go to the Advanced tab and set the top margin to about -65.

Publish your header by clicking the PUBLISH button on the bottom side of the Elementor settings panel. Add a display condition by clicking the ADD CONDITION button. Click the SAVE & CLOSE button once you are done setting the display condition.

Step 2: Add the Custom CSS

The CSS below is used to control the transition effect. You can add the CSS on theme customizer. Go to Appearance -> Customize on your WordPress main dashboard. On theme customizer dashboard, open the Additional CSS block and paste the following CSS snippet.

The CSS snippet:

.header-2 {
 transform: translatey(-80px);
 -moz-transition: all .3s ease!important;
 -webkit-transition: all .3s ease!important;
 transition: all .3s ease!important;
}

.elementor-sticky--effects.header-2  {
 height: auto!important;
 transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
 display: none!important;
}

Click the PUBLISH button to apply the change.

The Bottom Line

Elementor Pro comes with a Theme Builder feature in which you can use the feature to create custom templates for your theme parts, including the header. When creating a custom header using Elementor Theme Builder, you can set any behavior you like thanks to the ability to add custom CSS. Even without adding custom CSS, you can set effects like sticky and transparent.

Changing the header on page scroll itself offers some advantages.

For instance, you can use the secondary header (the header that appears once the page is scrolled down) to increase the chance your page will be shared by displaying only the social media sharing buttons on it.

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

1 thought on “How to Change Header on Page Scroll in Elementor”

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.