Skip to Main Content

4 Easy Steps To Change Menu Items in WordPress?

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 use even after the Optimized DOM Output Elementor Experiments are enabled.

There are easier ways to Change 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 menu items individually with some basic CSS. 

Here is the Image for reference and the Button to visit and view the page.

Style Navigation menu Individually

Step-1: Appearance

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

  1. Appearance
  2. Menus
Picture shows how to access theme Menu by going to Appearance then Menus

Step:2- Screen Options

To access the hidden properties, 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. Now this will add another field to the Menu items shown in number 3 (for reference).

Step:3- Menu items

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

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

Step:4- Change Menu items in WordPress with Custom CSS

Elementor Pro’s users:

If you’re an Elementor Pro user, please follow the guide.

  1. Click the Nav Menu widget’s handle
  2. Go to Advanced tab – advanced
  3. Add the CSS class to the Nav Menu widget
  4. Scroll down and you will find Custom CSS and start adding your CSS
Last item CSS class with Elementor
Custom CSS under Navigation (nav) menu

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

Elementor's Custom Code
/* .last-item is the nav class i define and .contact-form is the css for nav menu*/
.last-item .contact-form{
    background: #000;
}
/* This CSS is for link color*/
.last-item .contact-form a{
    color:#fff;
}
.el-icon a{
    color: red;
}

/* If you set up color in typography settings, use !important*/
.el-icon a{
    color: red!Important;
}

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
/* Style as needed*/
.contact-form{
    background-color: #000;
}
/* This CSS is for link color*/
.contact-form a{
    color:#fff;
}

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.