{"id":7776,"date":"2023-09-18T20:00:54","date_gmt":"2023-09-18T20:00:54","guid":{"rendered":"https:\/\/nichetwins.com\/?p=7776"},"modified":"2023-09-19T15:22:15","modified_gmt":"2023-09-19T15:22:15","slug":"how-to-change-menu-color-in-wordpress","status":"publish","type":"post","link":"https:\/\/nichetwins.com\/how-to-change-menu-color-in-wordpress\/","title":{"rendered":"How to Change Menu Color in WordPress (3 Ways)"},"content":{"rendered":"\n
<\/div>\n\n\n\n

Great site owners know that every square inch of their website presents an opportunity to further highlight their brand. <\/p>\n\n\n\n

And when it comes to effective branding, few things are as important as color scheme<\/strong>.<\/p>\n\n\n\n

That’s why it’s worth taking the time to change the color of even seemingly trivial elements like your WordPress navigation menu<\/em>.<\/p>\n\n\n\n

Having a menu with a color scheme that aligns with your brand and logo shows attention to detail. Added up, all these little details contribute to your readers’ “first impression” of your site.<\/p>\n\n\n\n

In short, it matters<\/em>.<\/p>\n\n\n\n

Ultimately, depending on the theme you have chosen and your comfort level with custom code, there are a few different routes you can take.<\/p>\n\n\n\n

To change the menu color in WordPress, first check your theme editor capabilities by navigating to Colors > Primary Navigation. If the customizer options are limited, consider deploying custom CSS instead. Finally, for single menu item color changes, you can add custom HTML to the desired Navigation Label directly.<\/strong><\/p>\n\n\n\n

\n \n <\/iframe>\n <\/div>\n\n\n\n\n\n

Adjust Primary Navigation Colors in Theme Editor<\/h2>\n\n\n\n

As usual, the quickest and easiest ways to make this adjustment is to use your theme customizer.<\/p>\n\n\n\n

To do so, from the WordPress dashboard start by selecting Appearance <\/strong>> Customize<\/strong>.<\/p>\n\n\n\n

Depending on the specific theme you have activated, these next steps may vary slightly. That said, most theme customizer menus are intuitive and fairly similar.<\/em><\/p>\n\n\n\n

In GeneratePress<\/a> for example, you’ll need to click Colors<\/strong>, followed by Primary Navigation<\/strong>.<\/p>\n\n\n

\n
\"Primary<\/figure><\/div>\n\n\n
<\/div>\n\n\n\n

Within the Primary Navigation drop down you will notice four sub-sections labeled Navigation Background<\/strong>, Navigation Text<\/strong>, Sub-Menu Background<\/strong> and Sub-Menu Text<\/strong>.<\/p>\n\n\n\n

\"Niche<\/figure>\n\n\n\n
<\/div>\n\n\n\n

You will also notice that each element has a total of three different color states you can select from: Initial<\/strong>, Hover <\/strong>and Current<\/strong>.<\/p>\n\n\n\n

“Initial” can be thought of as the baseline <\/strong>color. “Hover” on the other hand, is the color the associated menu element will change to once the cursor is hovering<\/strong> over it.<\/p>\n\n\n\n

And finally the “current” option gives you the power to change the color for a menu element on a specific page or post<\/strong>. For example, you could make the background color of your primary navigation different for each category page.<\/p>\n\n\n\n

This is one of the cool things about the GeneratePress Theme – it gives you maximum control over your menu colors across all four of these elements and all three of these possible states.<\/em><\/p>\n\n\n\n

Once you click on a color state, you have a few different options when it comes to color selection.<\/p>\n\n\n

\n
\"Navigation<\/figure><\/div>\n\n\n
<\/div>\n\n\n\n

You can select a global site color<\/strong> from the default options listed. You can also use a combination of the color box field and slider<\/strong>. Alternatively, if you know the exact hex value<\/strong> of your desired color, you can enter it directly in the hex field.<\/p>\n\n\n\n

Unsure how to identify the correct hex code? <\/strong>Not a problem. <\/p>\n\n\n\n

If you have an image that includes the exact color you wish to use for a menu element, upload the image file to the Image Color Picker<\/a> website. Then place your mouse over the desired color, and click it. The Hex code will automatically populate.<\/p>\n\n\n

\n
\"Example<\/figure><\/div>\n\n\n
<\/div>\n\n\n\n

Pro Tip<\/strong>: Most WordPress themes also give you the ability to change link colors<\/a> for hyperlinks within a page or post that are not located within the navigational menu<\/em>.<\/p>\n\n\n\n

Notably, the extent to which you can make these adjustments directly within the customizer varies by theme.<\/p>\n\n\n\n

Add Custom CSS to ‘Additional CSS’ Field<\/h2>\n\n\n\n

If the menu color control options within your theme editor are limited, you can always consider deploying some custom CSS instead.<\/p>\n\n\n\n

This option requires adding a bit of custom code to the Additional CSS<\/strong> field, which is also located in the theme editor. <\/p>\n\n\n\n

To be clear, you do not need to know anything about coding or programming<\/strong> to follow this approach. Instead, you just need to follow a few simple instructions.<\/p>\n\n\n\n

First, head over to your web browser and visit your website. On the main page of your site, right click and select Inspect<\/strong>.<\/p>\n\n\n

\n
\"How<\/figure><\/div>\n\n\n
<\/div>\n\n\n\n

Next, hover your mouse over the main menu area and determine the menu CSS class name within the Inspect code field. <\/p>\n\n\n\n

As you can see in the Niche Twins example above, the menu class name is “.main-navigation”. <\/p>\n\n\n\n

Finally, depending on the menu element color you wish to change, simply copy and paste the corresponding code below into the Additional CSS field. <\/p>\n\n\n\n

Be sure to replace “.main-navigation” with your site’s menu class name and “HEXCODE” with the desired hex value.<\/strong><\/p>\n\n\n\n

\n
\/* Main Menu Background<\/strong>. *\/<\/code><\/pre>\n\n\n\n
.main-navigation {
background-color: #HEXCODE;
}<\/p>\n\n\n\n
\/* Main Menu Initial Text<\/strong>. *\/<\/code><\/pre>\n\n\n\n
.main-navigation a {
color: #HEXCODE;
}<\/p>\n\n\n\n
\/* Main Menu Hover Text<\/strong>. *\/<\/code><\/pre>\n\n\n\n
.main-navigation a:hover {
color: #HEXCODE;
}<\/p>\n<\/blockquote>\n\n\n\n
Click save and clear cache before checking out the update(s) on your live site.<\/p>\n\n\n\n
Hoping to change the color of a sub-menu element? <\/strong><\/p>\n\n\n\n
Go back to Inspect and determine the sub-menu class name for your site. In our case, we would replace the “.main-navigation” class with “.sub-menu”, and use the same remaining code above as appropriate.<\/p>\n\n\n\n
Add Custom HTML to ‘Navigation Label’<\/h2>\n\n\n\n
For instances where you wish to change the color of a single menu item<\/strong>, adding custom HTML directly to the WordPress Navigation Label is your best bet.<\/p>\n\n\n\n
Very few people realize that the Navigation Label field is HTML ready (shoutout Kori Ashton at AskKori.com<\/a> for the tip!) This means you can drop some code straight into the field and it will be deployed on your live site.<\/p>\n\n\n\n
Go to Appearance <\/strong>> Menus <\/strong>and select the menu item you wish to change. In this example I’ll select our ‘About’ menu item. <\/em><\/p>\n\n\n\n
Next, within the associated Navigation Label, simply add the custom code below depending on the change you wish to make. <\/p>\n\n\n\n