It’s a very common problem. You’ve spent hours searching for the right theme for your website and you think you’ve found just the one. The layout, fonts, and everything else is perfect. There’s just one problem – the menu color. Or the color of some other element that bugs you. These days WordPress themes are very customizable. The “Customize” option under “Appearance” in the dashboard lets you change your theme easily in any number of ways that are allowed by the theme author. Unfortunately, they can’t think of everything and changing the menu color can fall under that category.
Fortunately, the customize screen usually gives us the option to insert additional CSS. For example, here’s what the additional CSS section looks like:
Here, you can add extra CSS to customize your theme to any extent. And this custom CSS is saved separately depending on the theme. The trick is in figuring out what CSS to use.
Step 1: Identify the Element you Need to Change
It’s easy to say “Change the menu color”. Unfortunately, each theme has a different way of referring to its elements. In fact, you probably don’t want to change the sidebar color, but the color of the constituent elements – the widgets. Before we can change anything, we have to get a handle on what we want to change. To do this, right click on the area you want to change in a browser like Chrome or Firefox and click “Inspect Element” like this:
This will bring up the console containing the various elements of the page on the left and the settings for those elements on the right. To find the element responsible for changing the color, you need to look at each selection on the left like this:
For each element, look at the details on the right and search for words like “background” or “background-color”. When you find a line containing these words, uncheck and check the “tick” mark next to them to see if they result in a change in the menu color. If it doesn’t, then that’s not the one you’re looking for. Search further down, or search another element.
In my example, I eventually found the element I was looking for with the “widget” class. You can see below that when I remove the check mark next to the “background” element, the menu loses its color:
Step 2: Choose the Color
Now you’ve done the hard work! The next step is to change the color to whatever you want. To do this, uncheck the existing color option and click near the closing bracket “}”. This will then allow you to enter your own CSS rule. You can enter something like “background-color”, press tab, and type in the color you want. Then you should get a drop down box of possible values, and the result will change in real time like this:
Here, I’ve set the color to green and you can see that the menu above the console has turned green as well. This doesn’t make any actual changes to your site – just a temporary change that’s visible in your browser. So you can experiment to your heart’s content. You can even place an image as the background like this. Once you’re satisfied with your changes, it’s time to make it permanent.
Step 3: Extracting the New Rule
To extract the rule, copy it by right clicking it (on Firefox) like this and selecting “Copy Rule”:
If you’re on Chrome, you can just select the entire rule with your mouse and copy the text. Paste it into an editor like Notepad, and then delete all the existing rules except for the new one you just added:
What you have remaining is now the final CSS rule to copy/paste into the “Additional CSS” section of your WordPress theme customization interface. You can use the above procedure to modify the appearance of any element on your site – not just menus. By far, the most difficult part is finding the right element and the right rule to change. Once you’ve done that, it’s easy!