Skip to Main Content Skip Table of Content

How to change the menu color in WordPress and Elementor?

Rather than using Browser's inspect elements to find the right item, WordPress has an inbuilt feature that is hidden by default but if you follow this tutorial properly we can use this to add our custom CSS classes and change the menu color in WordPress and Elementor with ease

Change Menu items in WordPress

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.

Elementor Optimized DOM output

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

The picture shows how to access the theme's Menu by going to Appearance then clicking or hovering over the 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

To add our unique CSS classes, we have to enable them by clicking the Screen Options next to Help then below the "show Advanced Menu Properties"
  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).

Practical example of Badge design

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);    
}

Add Custom CSS area in nav menu widget
Change the color of individual navigation menu items
You will see something like when you applied

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.

Elementor Custom code allows to add custom CSS and JS

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 –

Elementor's Promotion
CSS is added to the customize section for Elementor free user

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

Thangjam Kishorchand

Thangjam Kishorchand

Hi there! I'm Kishorchand, and this is my blog where I share my Elementor tips and tricks that I've learned over the past two years. I'm mostly active on Quora and Facebook, and I love experimenting with design trends like variable fonts and dark mode.

Upgrade to Elementor pro Today

Scroll up further to Load all the comments...