How to change logo color when scrolling in Elementor

This is a very basic and quick tutorial. Ever wonder how you can change the logo color when you scroll down? This is the tutorial about it.

There are tons of ways to make this happen. I think SVG logo method is the better way. But I think SVG is a little bit hard for now user. So I will show the easiest method.

We just need the the save logo in 2 different colors one in black (or any color you want) and other is white (or any color you want).

Lets design our header with elementor theme builder.
In my case I am just adding a logo and a menu.

Perfect ! Now we need to add classes to our logos. Lets say the class of our black logo is ‘logo_show’ and the white one is ‘logo_hide’ .

Advertisements

Let’s jump into the CSS part.
First we need to hide our white logo. We only want to show it when scroll. So let’s hide it. The class of our white logo was ‘logo_hide’.

1	`.logo_hide{display:none}`

This will hide our white logo initially.
Now if we inspect our header when scroll, we will see elementor adds a class to it called ‘elementor-sticky–active’. We need to target that class.

When sticky is activated we need to hide our black logo and show the white one. So here is the CSS

12	`.elementor-sticky--active .logo_show{display:none}.elementor-sticky--active .logo_hide{display:block}`

Now if you scroll you will see our logo is changing when we scroll.
If you want to change the backgound color and the menu text color also when scroll here is the complete code. You need to change it according to your need.

123456 .logo_hide{display:none}.elementor-sticky--active .logo_show{display:none}.elementor-sticky--active .logo_hide{display:block}.elementor-sticky--active {background:#2c2c2c !important; }.elementor-sticky--active a{color:#fff !important}.elementor-sticky--active a.elementor-item-active{color:red !important}