4 Easy Steps To 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.

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

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.

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

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

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.

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

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