CSS, Elementor

How to swap out your logo in your sticky header

Difficulty Rating :
Written byAires DaGraca

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 once my header becomes sticky?” .

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.

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.

Request A Tutorial

Have a request I would love to hear about.

Latest Post

How To Add Dark Mode To Your Elementor Powered Site.

This javascript plugin was a gem to find. Create by Sandoche Adittane this plugin did everything I needed it to do from a developers stand point.