Greetings all,

This tutorial is going to answer a question that I have seen tons of times across multiple Elementor community groups. And the questions is ” How to a change my logo in my sticky header?” .

I am not going to go into detail about how to make your header sticky because I think the team at Elementor did a fine job at explaining how that could be done.

You can find that video below if you need to view it.

Lets begin

This is the effect we are going to achieve with just a couple lines of css and the power of Elementor.

As you can see in the image above the logo changes from one to another has the user scrolls up and down.

So lets look at how I set this up.

Instead of using the logo widget I went with 2 image widgets in the same column. I gave the top image a class of .primary_logo and the bottom image a class of .sec_logo.

• 

• 

Next add your logo images and include a link to your home page if you like. Before you move on to the next step we need to add some css to get fix an issue with margin that happens to the primary logo or top image.

selector {
    margin: 0px;
}

The CSS

This css is really the bulk of the magic. If you have followed the tutorial by the Elementor team it might look familiar to you.

Please note that applied this css inside my header section the selector is designed to target the wrapper element it can’t do that if you apply this css inside your customizer or style sheet.

.sec_logo {
    display: none;
}

selector.elementor-sticky--effects .sec_logo {
    display: block;
}

selector.elementor-sticky--effects .primary_logo {
    display: none;
}

If you have done everything correctly you should see the fruits of your hard work.

Congratulations 💥🎉

Let me know what you think int the comments.