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.
2 thoughts on “How to Change Header on Page Scroll in Elementor”
Hi. This is a great article. Worked great except for header-1 has a small (5px or so) margin atop that I can’t figure out how to eliminate. Is this something in the CSS or the header itself?
URL: https://6b17618342.nxcli.net/demo/
The code worked great, thanks, until a chrome update last week broke Elementor’s Sticky Effect on desktop. Elementor have now fixed the bug so Sticky effect works again, however your CSS doesn’t work since the updates, are you able to update? Thanks.