In this video, I will walk you through step by step how to change your logo in your header by using Elementor’s Sticky Navbar feature. Here is an easy way to create this effect, even for beginners.
🙏 Support this channel by purchasing through my affiliate links (this video is not sponsored and I only refer to what I use to drive my personal design biz) ❤️
👉 Start with Elementor Pro
https://elementor.com/pricing/?ref=4977
🚀 For a 1-on-1 Power Hour Elementor Training Session
https://calendly.com/jeffrey-lytbox/e…
/=============CSS CODE HERE==============/
✅ CSS Here 👇
/* 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 */
}
/* 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 / .elementor-sticky–effects .sticky-menu-items ul li a::after { background-color: /add your color for underline on scroll here*/;
}
=============================================
My goal is to create a community for Web Designers, Developers, Freelancers, and Elementor enthusiasts to learn the design & business side of creating websites.
Got questions? You can reach me anytime – https://lytbox.co/contact
=====
➡️ My #1 Tool: Elementor Pro
https://elementor.com/?ref=4977&campa…
=====
➡️ My Go-To Elementor Addons:
Crocoblock
https://elementor.com/?ref=4977&campa…
Dynamic Content
https://www.dynamic.ooo?ref=129
The Plus Addons
https://theplusaddons.com/elementor?r…
Mighty Addons
https://mightythemes.com/mighty-addon…
=====
➡️ My Go-To Hosting:
Cloudways
https://www.cloudways.com/en/?id=485185
=====
👉The Tools I Use: https://lytbox.co/our-tools/
License
Creative Commons Attribution license (reuse allowed)
