How to add custom CSS class to a menu item in WordPress

If you want to format a specific menu item on your website in a different way and want to a CSS class to that specific item, this is how you could do that.

Go to Appearance >> Menu >> Open Screen Options settings >> Check CSS Classes >> Expand the menu item where you want to add a custom CSS class and put the class name in CSS Classes (optional) field. Here we have used the name test. You could specify names as you like. Don’t use space between the letters.

This is how this class will be appended to the specific menu item when you look at the HTML code rendered on the page. You can write your custom CSS based on this class.

For example, to change the color of this specific menu item, you could use the following CSS snippet in the Divi Theme Options Custom CSS area.

.test a{
 color: red;
}