How to customize your WordPress menu background color

How to use the WordPress menu CSS Classes feature

Sometimes, you want one of your WordPress menu items to have a bolder look. For example, we’re proud of our WordPress Malware Removal Services, so we wanted to feature this service in our top menu and make it show under a different background color to stand out from the other menu items.

We used the WordPress Menu CSS Classes feature for this task, which comes with the default WordPress setup. Most of you may have never seen or knew about it because it remains hidden by default, so you must enable it first. Below, we’ll show you how to enable and use WordPress Menu CSS Classes to change how your menu looks.

1. Enable your WordPress Menu CSS Classes feature

Go to your Menu page, then scroll up and find the Screen Options option on the right part of your screen. Click it, and it will enable the CSS Classes option.

2. Add a CSS class in your WordPress menu item(s)

Please stay on the Menu page and select the menu item you want to change its background. Then add a CSS Class, this has to be unique and not used from your theme so make sure you come up with one that is hard to guess. For example, you can add the current year(2018) at the end of it, like we did(mynewclass2018).

3. Add the WordPress menu CSS custom code

This is probably the most challenging part because you will need to add the following CSS code to your theme:

.mynewclass2018 {

background-color: #6d6306;

}

Where #6d6306 is the HTML color code you want to use as the background color.

If you use a child theme, you can add the code inside your style.css file or the Custom CSS theme feature if available. The last solution applies to any other theme with an admin panel and lets you add custom CSS code.
If your theme is not a child theme or doesn’t support changing the CSS from your WordPress Dashboard, we strongly suggest installing a plugin like Simple Custom CSS to do the job. Then go to the Customize page, scroll, find the “Simple Custom CSS” option, and add the custom CSS code. Finally, save, and you’re good to go.

4. Repeat for any other or all of your menu items

You can follow the same steps to change any other(or all) of your WordPress menus. Apart from changing the background color, you can change the font color and weight and use any other class setting you want.