How to change individual hover & active colors of Elementor menu?

Post author:DMmotionarts
Post published:November 3, 2023
Post category:Website Tutorials
Post comments:0 Comments

Learn how to change the hover and active colors of specific or individual menu items of Elementor Menu. With this CSS you can simply add different colors to both hover and active colors of menu. Simply add it in your Additional CSS or Custom CSS panel of elementor menu.
Make sure to change the class name to appropriate menu classes and make sure to match colors of both hover and active state to keep consistency.

				
					/* Set the hover color for each menu item */
/*Change menu-1,menu-2,menu-3,menu-4 etc to appropriate class name*/

.elementor-nav-menu > li > a:hover {
color: #4C238F !important; /* Default color for most menu items */
}

.elementor-nav-menu .menu-1 > a:hover {
color: #D066CE !important; 

.elementor-nav-menu .menu-2 > a:hover {
color: #FF9F2D !important; 
}

.elementor-nav-menu .menu-3 > a:hover {
color: #0290DD !important; 
}

.elementor-nav-menu .menu-4 > a:hover {
color: #0290DD !important; 
}

				
					/* Different Active Menu Colors */
/*Change menu-1,menu-2,menu-3,menu-4 etc to appropriate class name*/

.elementor-nav-menu .menu-1.current-menu-item > a {
color: #4C238F !important;
}

.elementor-nav-menu .menu-2.current-menu-item > a {
color: #D066CE !important;
}

.elementor-nav-menu .menu-3.current-menu-item > a {
color: #FF9F2D !important;
}

.elementor-nav-menu .menu-4.current-menu-item > a {
color: #0290DD !important;
}