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!
Post Views: 21