In this article, we will discuss creating a header where the logo changes when scrolled down, and then changes back to the original on scrolling back to the top.
Step 1: Create a sticky header using Elementor Pro.
If you don’t have a header already created, you can go to Templates > Theme Builder from the WordPress dashboard. Click on Add New, and select Header as the type of template. The Elementor editor will open and you can go ahead and create your header.
To make the header sticky, select the parent section of the header, go to the advanced tab in the Elementor editor and scroll down to Motion Effects. Here you can make the header sticky to the top by selecting the top option from the sticky dropdown menu. Add an appropriate effect offset (Effect Offset: the amount of distance from the top of the screen when the sticky effect will trigger). Adding an effect offset value is essential for the effects to take place.
Step 2: Add the two logos
In this article, we will consider two logos, a dark logo and a light logo. The dark logo works with the light background and the light logo works with the dark background. You can any logo you like depending on your situation and what you are trying to achieve.
Next, we will add CSS classes to these logos, and our header menu. In this example, add a class “l-logo” to the light logo and a class “d-logo” to the dark logo. A class named “sticky-menu-items” will be added to the header menu.
Step 3: Add the CSS code to change the logo on scroll
Here is the CSS code:
/* HIDES THE DARK LOGO */
.d-logo {
display: none;
}
/* SWITCHES LOGO ON SCROLL */
.elementor-sticky--effects .d-logo {
display: inline-block;
}
.elementor-sticky--effects .l-logo {
display: none;
}
/* CHANGES THE BACKGROUND MENU ON SCROLL */
.elementor-sticky--effects {
background: #fff!important; /* edit here to change the background color for your sticky header*/
}
/* CHANGES THE TEXT COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a {
color: #333!important; /* edit here to change your text color for sticky header */
}
/* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */
.elementor-sticky--effects .sticky-menu-items ul li a {
transition: .5s all ease-in-out;
}
.elementor-sticky--effects {
transition: .5s all ease-in-out;
}
/*updated changing mobile hamburger menu toggle and menu links on hover on scroll */
/*change color to the mobile menu toggle*/
.elementor-sticky--effects .sticky-menu-items i {
color: /*add your color here*/!important;
}
/*add color to the background of mobile toggle*/
.elementor-sticky--effects .sticky-menu-items .elementor-menu-toggle {
background: /*add the background color here or add transparent for no background color*/!important;
}
/*CHANGES THE ACTIVE MENU ITEM ON SCROLL*/
.elementor-sticky--effects .sticky-menu-items ul li .elementor-item-active {
color: /*add your color here*/!important; /* edit here to change the active menu item text color for sticky header */
}Note: .elementor-sticky–effects is a class added to the section/element when the sticky effect is triggered on it.
Here is a video tutorial for better guidance and a proper explanation of the CSS code:
