Do you want to change the logo color in the sticky header when users scroll down the page? Changing the logo color on scroll can add a dynamic effect to your website.
With the Sticky Header Effects for Elementor plugin, you can easily change the logo color in the Elementor sticky header on scroll.
To check the complete feature overview documentation of Sticky Header Effects for the Elementor plugin, click here.
Requirement – This feature is a part of Sticky Header Effects for Elementor plugin, make sure its installed & activated.
To do this, add the Elementor Container widget, then design the header content as per your requirements or use a header template and follow the steps –
1. Select the main Container widget of the header, then go to the Advanced > Sticky Header Effects tab and turn on the Enable toggle.
2. Then enable the Change Logo Color toggle.
Note: From the Before scrolling tab, you can set the initial logo color to white or black.
3. Then go to the After scrolling tab, from here you have to change the logo color.
- White Logo – This will set the logo color to white.
- Black Logo – This will set the logo color to black.
- Full Color Logo – This will show the original logo color by removing all the filters added in the Before scrolling tab.
Note: Select only one option in each tab.
Select the option as per your requirements.
Note: This will affect all the images in the header added using the Elementor Image and Elementor Site Logo widgets.
Now, when you scroll down, the logo color will change in the sticky header.
