How to change logo color when scroll in Elementor

[wp_ulike]

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.

Set the background color of the header what ever you want. In my case it will be white. Also set a z-index value to a higher value, so that it sits on top of all other contents.
Finally lets make the header sticky (Advanced > motion effects > sticky > top )

For the next part Lets duplicate our logo and replace the duplicated logo with the white logo.

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’ .

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’.
.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

.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.


.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}

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More