Skip to Main Content Skip Table of Content

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

Rather than using inspect elements to find the right last 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 style it easily.

Change Menu items in WordPress

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.

Elementor Optimized DOM output

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

Style Navigation menu Individually

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

Picture shows how to access theme Menu by going to Appearance then 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

How to access WordPress Menu hidden features

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)

The picture shows how to add CSS class to the navigation items

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

Practical example of Badge design

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

Change the color of individual navigation menu items
You will see something like when you applied

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.

Elementor Custom code allows to add custom CSS and JS
Add Custom CSS area in nav menu widget

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 –

Elementor's Promotion
SS 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, this is my place where I write about my Elementor tips and tricks that I learned for the last 2 years. I am mostly active on Quora and Facebook. I love messing around with design trends like Variable Fonts, Dark Mode

Powered by Elementor pro

This site is powered by Elementor pro : Theme builder and it contains Affiliate links,which means that if you buy from my links, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.

Scroll up further to Load all the comments...