How to change the menu color in WordPress and Elementor?

If you’re using Elementor’s Nav Menu/ 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

Do you know WordPress has a feature that lets you change the menu color in WordPress?
If not, in this tutorial I will show you how to change the menu color in WordPress that is hidden by default and you can apply the CSS with Elementor without scratching your head.

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

1. Hover your mouse on the Appearance tab or click the appearance tab on WordPress Dashboard
2. Click the Menus to edit the menu
3. 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

1. 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“
2. 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)

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

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

/*
* 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 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