If you’re using Elementor’s WordPress Menu widget, finding the correct child items with the Browser’s Dev tools inspect elements is tricky because of the amount of wrapper (DIV) Elementor uses even after the Optimized DOM Output Elementor Features is enabled.
WordPress to the rescue
Step#1- Appearance
To access the settings, Hover your mouse over the Appearance tab and click Menus. This will open the menu and from there choose the right menu.
Appearance > Menus
- Hover your mouse on the Appearance tab or click the Appearance tab on the WordPress Dashboard.
- Click the Menus to edit the menu
- Select the menu where you want to change the menu color.
Step#2- Screen Options
By default, the feature is hidden. To access it, we have to click the screen options on the Top Right Corner of the Menus page. Under “Show Advanced Menu Properties” – check the “CSS Classes” checkbox. This will add another field to the Menu items shown in number 3 (for reference).
Screen Options > Show advanced Menu Properties > Checked: CSS classes
- To add our unique CSS classes, we have to enable them by clicking the Screen Options nest to Help then below the “Show Advanced Menu Properties“
- Checked the CSS classes to enable the features
Step#3- Click the Menu items
To style the menu items individually, we must assign CSS classes to the menu items shown in the picture below.
Menu Items > CSS classes (optional)
Change the Menu Color in WordPress & Elementor with Custom CSS
In the previous step, we added CSS classes to the Navigation items or WordPress menu items. Now we will add some custom CSS and change the color of the menu color.
Elementor Pro’s users:
Path- Nav Menu/ WordPress Menu Widget’s handle > Advanced Tab ¬ Advanced > Custom CSS
.home a{
color: #92B4EC;
}
.menu--item a{
color: #FFFFFF;
}
.blog a{
color: #EB5353;
}
.contact a{
color: #AB46D2;
}


or you can use Elementor’s Code functionalities and inline the CSS to the body or head tag of the page. To make sure, don’t forget to wrap the CSS in the <style> tag otherwise, it will not work.
WordPress or non-Elementor users
If you’re not using Elementor Pro then you can head over to Theme Customize settings’ Additional CSS area or use a plugin like Code Snippets & add the CSS rule there –
The CSS is the same as Elementor Pro
If You have any questions related to Elementor that come up regularly. Please post your question in the comment section.
I will properly credit you
Thank you