How to Change / Replace Logo on Sticky Header Scroll in Elementor WordPress | Different Sticky Logo

In this wordpress tutorial for beginners you will learn how to set different logo on both main header and sticky header on scroll using custom css in elementor pro website page builder plugin. So when person scroll website and show sticky header so we are going to change logo for sticky header only.

1- First duplicate / add one more image (logo) element in header.
2- In second logo widget change logo according to your requirement.
3- Then Add ” logo1 ” css class in first image / logo widget.
4- Then Add ” logo2 ” css class in second image / logo widget.
5- Then Add Custom CSS to hide main / original logo in sticky header and show second / other logo in sticky header.

* Use this Custom CSS Code to replace logo in sticky header:

/* The scroll logo2 is currently off.*/
.logo2 {
display: none;
/* Shut this logo off and activate the other logo after scroll*/
.elementor-sticky–effects .logo2 {
display: inline-block;
.elementor-sticky–effects .logo1 {
display: none;

* In logo / image widgets you can add css classes name according to your requirement then replace in custom css also.

Videos Links:
1- How to Change Sticky Header Background Color on Scroll in Elementor WordPress

2- How to Change Menu Text Color & Hover Color in Sticky Header on Scroll in Elementor WordPress


#header #sticky #logo #image #elementorpro #elementor #elementorpagebuilder #wordpress #wordpresstutorial #webtaskwithhassan #hassangilani