Need to change header on page scroll with Elementor ?

There are many header behaviors you can achieve with Elementor Pro. One of them is to change one header with another when scrolling the page. This article will show you how.

Elementor Pro as you know comes with a feature Theme Builder to allow you to create a custom header on your website WordPress. Thanks to this feature, you no longer need to rely on what is offered by your WordPress theme when it comes to customizing headers, which is usually limited.

You can add any element you want, use any typography setting you want, and set any behavior you like.

Elementor Pro has a built-in adjustment option to add a sticky header. We will use this functionality to create a header that changes as the page scrolls. Custom CSS will also be needed for this type of header behavior.

Read also : How to create a custom header in WordPress with Elementor

Here is an example of a header that changes as the page scrolls.

Step 1: Create the custom header

Before you start, make sure you have upgraded your Elementor to the pro version as the 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 main WordPress dashboard. In the theme builder dashboard, hover your pointer over the tab Header and click on the icon more to create a new header template.

In the template library that appears, you can select a predefined header template that you like. Or, if you want to create the header from scratch, you can just close the template library to open the Elementor editor.

Discover also: How to create custom shapes in Elementor

In this article, we'll create the header template from scratch.

Start creating your header by adding a section, then add the necessary elements and create the styles accordingly.

Once you have added the necessary elements and created the styles, go to the tab Advanced. Under the block Advance, set the Z index to 100 and add the CSS class.header-1

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

change header to Elementor page scrolling

Edit the duplicate header. You can add more items or remove existing items. You can also change the background. All that you want. Once editing is complete, go to the tab Advanced. Under the block Advanced settings, rename the CSS class to header-2.

Then open the block Movement effects. In the drop-down list Sticky, set to TOP. You can define the offset of the effects in the field Effects Offset. The value you set here will determine the scroll depth before the effect (sticky in this case) takes place.

When you're done editing both header sections, change the order of them.

change header to Elementor page scrolling

Edit the bottom section and set the negative margin to be above the top section. To do this, go to the Advanced tab and set the top margin to about -65.

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

change header to Elementor page scrolling

Step 2: Add Custom CSS

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

change header on page scroll

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 on the button PUBLISH to apply the change.

In short

Elementor Pro comes with the Theme Builder feature where you can create custom templates for the parts of your theme, such as the header. When creating a custom header using Elementor Theme Builder, you can set any behavior you want with the ability to add custom CSS. Even without adding custom CSS, you can set effects as sticky and transparent.

Read also: How to create a 404 page in WordPress with Elementor

Changing the header on the scrolling page itself offers some advantages.

For example, you can use the secondary header (the header that appears after the page is scrolled down) to increase the chances that your page will be shared by showing only social media share buttons. .

Get Elementor Pro Now!

Conclusion

So ! That's it for this tutorial which shows you how to change page scrolling header on Elementor. If you have any concerns on how to get there let us know in the Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...