Creating a sticky header with a background color that changes and a shrinking logo is a very commonly asked question among Elementor users. While there are several tutorials on using java or CSS tricks to achieve this, the Elementor Pro motion effects can be used to achieve much of the same goals without any coding knowledge.
Step One: Create Our Template.
Here I have created a two-column section and placed my site title on the left and a navigation widget on the right.
Step Two: Create The Color Change
I now go to the Style tab for the section and choose the background color I want to appear as the user scrolls. For this example, I am choosing a dark scheme.
I then tick the scrolling effects toggle and select the transparency options. Choose fade in, and keep the sliders very close together on the left side. You also need to set this effect to apply to the viewport. This will cause the header to go from transparent to dark color very quickly.
Step Three: Shrink The Title Or Logo
We now need to use the same concept for the site title or logo. I will use the Advanced tab and turn on the motion effects. Select the Scale option and this time we will keep our sliders to the right side. This will cause the logo to shrink quickly and near the same rate as the background change.
You may need to adjust the anchor points based on your desired effect.
Step Four: Adjust for Devices
Depending on your elements in the header you will need to now adjust the settings for tablet and mobile.
A Gift From Us
Please feel free to use this template on your website thanks to us. Download the zip file below and unzip it. Inside is a JSON file. Upload this file to your template library.