In this article, we will explore how to create a dynamic header in Elementor where the logo changes as you scroll down and reverts to its original form when scrolling back to the top. This effect enhances the user experience and adds a professional touch to your website design.
To begin, you’ll need to create a sticky header using Elementor Pro. If you don’t already have a header, navigate to Templates > Theme Builder from your WordPress dashboard. Click on “Add New,” select “Header” as the template type, and launch the Elementor editor. Once inside the editor, you can design your header according to your preferences. To enable the sticky effect, select the parent section of your header, go to the Advanced tab, and scroll down to Motion Effects. From there, choose “Top” in the sticky dropdown menu and set an effect offset. This offset determines the distance from the top of the screen when the sticky effect is triggered, so setting an appropriate value is essential for smooth functionality.
The next step is to add two logos to your header. In this example, we will use a light logo and a dark logo. The light logo is ideal for a dark background, while the dark logo works better with a light background. However, you can use any logos based on your design needs. Assign unique CSS classes to these logos to target them later with CSS. For instance, add the class “l-logo” to the light logo and “d-logo” to the dark logo. Similarly, add a class named “sticky-menu-items” to the header menu for additional styling.
Finally, you’ll need to add CSS code to make the logo and header background change on scroll. The code provided below hides the dark logo by default and switches between the two logos as the sticky effect is activated. It also customizes the background color of the header, adjusts text color, and even modifies the transition speed for a seamless effect. For mobile users, the CSS includes options to change the hamburger menu toggle and the background color of the menu toggle when scrolling. Additionally, you can personalize the active menu item’s appearance to match your design preferences.
/* 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 */
.elementor-sticky--effects .sticky-menu-items ul li a {
transition: .5s all ease-in-out;
}
.elementor-sticky--effects {
transition: .5s all ease-in-out;
}
/* MOBILE MENU TOGGLE AND LINKS ON SCROLL */
/* Change color to the mobile menu toggle */
.elementor-sticky--effects .sticky-menu-items i {
color: /* add your color here */!important;
}
/* Add background to the mobile toggle */
.elementor-sticky--effects .sticky-menu-items .elementor-menu-toggle {
background: /* add the background color here or transparent for no background */!important;
}
/* CHANGE THE ACTIVE MENU ITEM ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li .elementor-item-active {
color: /* add your color here */!important; /* edit to change the active menu item text color */
}The .elementor-sticky--effects class is automatically applied to the header section when the sticky effect is activated. By using this class, you can control the visual behavior of your header as users scroll.
For a step-by-step explanation and practical demonstration, watch our comprehensive video tutorial, which provides clear guidance on implementing this CSS code.