5/5

How to swap out your logo in your sticky header

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.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

Vertical Scroll Snapping In Elementor with CSS

In todays tutorial we are going to through how you can add vertical scroll snapping to your Elementor site with just CSS. Here is a preview how it should function. For this to work you don’t need any kind of…

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to. My working environment Theme: Hello Theme Elementor Version: Pro…

2 Comments

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?