How To Change Logo on Scroll – Elementor Basics

In this tutorial video, you will learn how to change the logo on scroll using Elementor step by step, without the need for any plugin, by simply using CSS code. The process is easy to follow and requires no advanced technical skills.

First, you will be shown how to create a new section in Elementor and add the logo you want to use. Next, you will learn how to add a class to the section and use CSS code to modify the logo’s appearance on scroll.

The video will guide you through the process of writing the necessary CSS code and explain the different properties used, so you can customize the effect to your liking.

By the end of the tutorial, you will have a logo that changes its appearance on scroll, adding a dynamic and modern touch to your website. Whether you are a beginner or an experienced web designer, this video will provide you with valuable insights on how to enhance your website’s visual appeal.

/* HIDING THE DARK LOGO - WebSensePro.com*/
.d-logo {
 display: none;
}
/* CHANGING LOGO ON SCROLL - WebSensePro.com*/
.elementor-sticky--effects .d-logo {
 display: inline-block;
}
.elementor-sticky--effects .l-logo {
 display: none;
}
/* CHANGING THE BACKGROUND MENU ON SCROLL - WebSensePro.com */
.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 */
}

/* CHANGES THE TEXT HOVER COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a:hover {
 color: /*add your color here*/!important; /* edit here to change your text color for sticky header */
}

/* CHANGE UNDERLINE COLOR IN ELEMENTOR NAV MENU ON SCROLL - WebSensePro.com*/
.elementor-sticky--effects .sticky-menu-items ul li a::after {
 background-color: /*add your color for underline on scroll here*/;
}