Skip to Main 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 Pro’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.

Elementor Optimized DOM output

WordPress to the rescue

Do you know WordPress has a build-in feature that lets you define CSS classes in Menu?
If you don't know, in this tutorial I will show you how to add your own CSS classes which is hidden by default and let you apply style in Elementor Advanced Plan or through theme customizer.

Step 1: Appearance

To access the settings, Hover your mouse over the Appearance tab and click the Menus. This will open the menu and choose the right menu. 

Appearance > Menus

Picture shows how to access theme's Menu by going to Appearance then clicking or hover over the Menus

  1. Hover your mouse on the Appearance tab or click the Appearance tab on the 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, 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, click the menu item and assign CSS classes to the menu items shown in the picture below.

Menu Items > CSS classes (optional)

Provide CSS classes toWordPress Menu

Practical example of Badge design
As a Badge

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.

Choose Advanced Plan resized
Upgrade your Design Today with Elementor Advanced Plan

You will need an Elementor Advanced Plan to access Custom Code and use your own custom CSS rules, if you haven't upgraded it yet use my Affiliate link this commission comes at no additional cost to you but it will keep the website a little help and write more compressive tutorials for you.

Elementor Legacy or an Advanced Account plan user- 

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

Custom CSS rules added to WordPress Menu custom CSS
Change the color of individual navigation menu items
You will see something like when you applied
    
/*
* I already added the CSS classes to each of the navigation menu in WordPress > Theme
* elementor-nav-menu__container is the wrapper class Elementor WordPress menu uses for Navigation and Dropdown menu
*/

.elementor-nav-menu__container{
    --home: #92B4EC;
    --sub-menu:#FFFFFF;
    --blog:#EB5353;
    --mission: #C1F7D5;
    --contact:#AB46D2;
}


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

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

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

.contact a{
    color: var(--contact);
    background-color: var(--sub-menu);
    border-radius: 50px;
}

    

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

Adding custom CSS rule to Elementor Custom Code area.

WordPress users

If you’re not using the Elementor Advanced plan then you can use the Theme’s customizer Additional CSS area or use a plugin like Code Snippets & add the CSS rule there – 

CSS is added to the customize section for Elementor free user

The CSS is the same as Elementor users.

Suppose 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

Picture of Kishorchand wearing Elementor Blue Shirt that I got it from wining Elementor Header competition

Thangjam Kishorchand Singh

Passionate about web performance, I specialize in assisting individuals and businesses in creating high-speed websites to elevate user experience, improve search rankings, and minimize bounce rates. I continually explore cutting-edge tools and techniques to optimize website performance, sharing insights through informative articles, engaging presentations, and valuable content.

Let's connect on my social media channels to engage in discussions about website speed and transform your site into a lightning-fast online experience.

Follow or chat with me -

Contact Me

Leave a Reply

Your email address will not be published. Required fields are marked *