How to change the color of the Navigation Menu items in WordPress and Elementor?

If you’re using Elementor’s Nav Menu widget, finding the correct child item with the inspect elements is tricky because of the amount of wrapper (DIV) Elementor uses even after the Optimized DOM Output Elementor Features is enabled.

There are easier ways to Change the color of the navigation Menu Items in WordPress without scratching the head.

Do you know WordPress has an inbuilt feature to add your own custom CSS classes?

If you don’t know. Please follow my article correctly, you can use this feature to style or change the color of the navigation menu items individually with some basic CSS. 

See the image for reference

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

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

Click the Menu items

To style the menu items individually, we have to assign CSS classes to the menu items shown in the picture below.

Menu Items > CSS classes (optional)

Here is the use case, if you’re looking for something like a badge in the navigation menu (Picture for reference).

Change the color of the Navigation Menu items in WordPress & Elementor with Custom CSS

Elementor Pro’s users:

If you’re an Elementor Pro user and you’re using Nav Menu widget, please follow the guide.

Nav Menu Widget’s handle > Advanced Tab ¬ Advanced > Custom CSS

/*
* I already added the CSS classes to each of the navigation menu in the WordPress > Theme > Menus > CSS classes areas
*/

:root{
    --home: #92B4EC;
    --sub-menu:#FFFFFF;
    --blog:#EB5353;
    --contact:#AB46D2; 
}
.home a{
    color: var(--home);
}

.menu--item a{
    color: var(--sub-menu);
}

.blog a{
    color: var(--blog);
}

.contact a{
    color: var(--contact);    
}

or you can use Elementor’s Custom Code functionalities and inline the CSS to the body or head tag of the page. To make sure, you wrap the CSS in the <style> tag otherwise it will not work.

For Non-Elementor Pro users

If you’re not using Elementor pro then you can head over to Customize settings or child theme or plugin & 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