Elementor Mega Menu Change Color of Active Parent Item

In this tutorial you are going to learn how to style the top level active item while on a subpage, for the Elementor Mega Menu element.

So you are going to be able to change the color and font-weight of top level menu item, while anywhere inside its related sub mega menu container, there is a WordPress menu element, with a link to the current page.

Keep in mind this will only work if you are using the WordPress menu element within the "mega containers" sub menu flyouts.

If you are using other kind of links (like Elementor Heading element with a link) this won't work as there will be no class names, and nothing at all really, in the HTML markup to indicate this is the current page.

Let's get started!

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

Copy paste this CSS under Advanced > Custom CSS for your Mega Menu element.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Mega Menu Change Color of Active Parent Item tutorial 
 * Found at this URL https://element.how/elementor-mega-menu-color-active-parent/ 
 */ 
</script>

Now, adjust the CSS to your liking

The CSS does all the heavy lifting here. You might notice it's quite complex, as the HTML structure really didn't lend itself to a CSS only solution...

With some very carefully crafted CSS however, we are able to make this work as we needed it.

Adjust the font-weight and color to what you need. Add other CSS rules if needed.

Note that as it is, the CSS will work for up to 8 menu items. Duplicate the selector in the same fashion in the event you have more than that.

Finally, enjoy your Elementor Active Top Level Styles Menu!

I hope you have enjoyed this tutorial!

Cheers!