Elementor Mega Menu Change Color of Active Parent Item

Elementor Mega Menu Change Color of Active Parent Item

First, import this Elementor Mega Menu Active Top Level Color CSS

Paste this CSS into the Advanced > Custom CSS section of your Mega Menu element.

				
					selector .e-n-menu-wrapper:has(.e-n-menu-content > .e-con:nth-child(1) .current-menu-item) .e-n-menu-title:nth-child(1) .e-n-menu-title-text,
selector .e-n-menu-wrapper:has(.e-n-menu-content > .e-con:nth-child(2) .current-menu-item) .e-n-menu-title:nth-child(2) .e-n-menu-title-text,
selector .e-n-menu-wrapper:has(.e-n-menu-content > .e-con:nth-child(3) .current-menu-item) .e-n-menu-title:nth-child(3) .e-n-menu-title-text,
selector .e-n-menu-wrapper:has(.e-n-menu-content > .e-con:nth-child(4) .current-menu-item) .e-n-menu-title:nth-child(4) .e-n-menu-title-text,
selector .e-n-menu-wrapper:has(.e-n-menu-content > .e-con:nth-child(5) .current-menu-item) .e-n-menu-title:nth-child(5) .e-n-menu-title-text,
selector .e-n-menu-wrapper:has(.e-n-menu-content > .e-con:nth-child(6) .current-menu-item) .e-n-menu-title:nth-child(6) .e-n-menu-title-text,
selector .e-n-menu-wrapper:has(.e-n-menu-content > .e-con:nth-child(7) .current-menu-item) .e-n-menu-title:nth-child(7) .e-n-menu-title-text,
selector .e-n-menu-wrapper:has(.e-n-menu-content > .e-con:nth-child(8) .current-menu-item) .e-n-menu-title:nth-child(8) .e-n-menu-title-text {
    font-weight: 900;
    color:#333333;
}

				
			

Now, adjust the CSS to your liking

This CSS handles the bulk of the work. While it may seem complex due to the HTML structure, a carefully crafted approach ensures it functions as required.

Feel free to adjust the font-weight and color to your preferences, and add any additional CSS rules if necessary.

Keep in mind, this CSS is set to handle up to 8 menu items. If you have more, simply duplicate the selector following the same pattern.

				
					We are using the :has pseudo selector here, which has ~90% browser support. As our change is cosmetic and not functional, I think it's alright.

However if you need this working everywhere, you will want to look at a JavaScript solution instead.
				
			

Do you need an expert? HIRE US NOW!