How To Change The Menu Color In WordPress

Last modified: February 20, 2020

FAQ

Do you want your menu color to look a little different? There isn’t an easy fix for this. Most WordPress themes don’t have this as an option. Instead, you need to use CSS to change the color.

Here is a way to change the menu color in WordPress using CSS.

* This button will show the rest of the post and open up an offer from a vendor

Step One: Find Out The Current Class Or ID

The first thing that you need to do is to find out what CSS ID or class is used by your theme for the container that surrounds your navigation menu.

This is done by right clicking on your website’s menu and inspecting the coding. In there, you need to find the color aspect for your menu.

It will depend on your browser and your theme on how this is displayed.

Step Two: Go To The Custom CSS Element

Next go to ‘Appearance’ and then ‘Customize’. This will take you to your WordPress theme’s customization screen. In the left-hand menu, then you can then go to the Custom CSS area.

Step Three: Add Some CSS Code

Add this small bit of code to the custom CSS code. You can change the color to whichever you want to.

.navigation-top { 
background-color:#000; 
}

If you’re looking to change the background color of a certain item, then you change the CSS coding to.

.menu-item-name { 
background-color: #ff0099;
border-radius:5px;
}

Why Change Just One Item’s Color?

You might want to change just one item on the menu because it will highlight it. For instance, when running an e-commerce website, you can easily highlight important pages like your shop page.

Recap: