How to Make Sticky Header Change Color on Scroll Elementor - Elementor
In this short video, I'll show you how to create a sticky header that changes color on scroll using Elementor. Learn how to make your header both sticky and transparent, giving your website a sleek, modern look. Whether you're designing a new site or updating an existing one, this quick tutorial will help you add a dynamic touch to your Elementor designs. Don't miss out on this essential Elementor trick!
#tipsandtricks #elementor #wordpress #elementortutorial
CSS Code:
body.elementor-editor-active selector {
margin-bottom: 0px !important;
}
/* Background color on sticky */
.elementor-sticky--effects
background:
#2C1D4D! important;
transition: all 0.5s ease;
/*
LOGO
*/
/* Logo sizing before sticky */
.logo img {
width: auto;
max-height: 100px;
transition: all 0.5s ease;
}
/* Logo sizing after sticky */ .elementor-sticky--effects .logo img {
max-height: 65px;
width: auto;
}
Hire us to work on your Website!
💌 [email protected]
👩💻 Visit https://abuzarmomin.com