How to change the submenu indicator color in Elementor’s WordPress Menu widget?

Elementor's WordPress Menu widget (until recently it was just called “Menu”) allows us to use menus that have already been created within the WordPress dashboard. This is a favorite and frequently used widget that has been an integral part of Elementor Pro for a long time. However, it has a few drawbacks; one of them is the impossibility of separately defining the submenu indicator color, neither in normal nor in :hover state.


Note: To follow this guide, you must have Elementor Pro installed and activated on your WordPress site.

To solve this, it is logical to use custom CSS. Since this is the Elementor Pro version, Advanced > Custom CSS is an available tool. However, this is where new problems arise. The usual detection of the CSS class to act on, using the Inspect/DevTools tool, does not give a good result. It is similar with using some WP plugins, such as Yellow Pencil.

The CSS code obtained in this way will be effective in the Elementor editor – but on the frontend, towards the end users, there will be no results.

Here is a simple solution to this problem.

The base of the custom CSS code to be added is as follows:

selector .has-sub-mmenu .sub-menu, .sub-arrow {
    fill: blue;

selector .has-sub-mmenu .sub-menu, .sub-arrow:hover {
    fill: green;

In this case, we set the submenu indicator color to blue in the normal state and green in :hover state. You, of course, should put the ones you need instead of these two colors.

This code should be added to the WordPress Menu widget itself, using Advanced > Custom CSS.

submenu indicator color - custom CSS

The result works well for both horizontal and vertical menus.

submenu indicator color

submenu indicator color

Details about the project for which this customized solution was developed can be found on the blog, in the article FlexRICAN –
Custom types, fields, and taxonomies that make the difference.

The WordPress Menu widget that comes with Elementor pro is a simple, reliable, and popular tool that allows us to style the WordPress menu in Elementor. However, what to do when clients and designers ask for more than what it naturally offers – for example, for the submenu indicator color to be defined independently? The solution is simple, in a small snippet of CSS code.

About the author

Obren Markov, Senior WordPress Developer and Elementor Expert

Obren Markov is a WordPress developer and designer with many years of experience in this field and several dozen created websites behind him. He is an Elementor Professional and the author of Template sets, who creates sites for end-users. Also works with agencies and independent WP designers as a subcontractor on their projects.

Basically about me

I’m Obren Markov, a senior WordPress developer, a qualified and university-educated IT professional accepted in Envato/ThemeForest as an Elementor template author and also in the Elementor Expert community.

I work directly for end users, but also for agencies and independent designers, complementing them in their projects.