change menu color in wordpress

How to Change the Menu Color in WordPress?

You have spent so much time searching for the most appropriate website theme as per your business. You have finally found the right one: the best layout, font, and everything else. But you are facing an issue which is how to change the menu color. Changing header color in WordPress is also easy. Do not worry, WordPress themes are customizable. The “Appearance”> Customize” option in the dashboard allows you to quickly allow you with plenty of changes. Unfortunately, most of you may be struggling with the menu color.

We will help you with this. Let’s know the steps to change menu color in WordPress.

How to Change Menu Color in WordPress: 3 Simple Ways

STEP 1: Find the ID of the navigation menu

Create your navigation menu normally and check your website’s front. Tap on the menu entry that you wish to change the color of and then right-click and select Inspect.

Once that is done you will notice that a panel opens at the bottom of the browser. It will resemble the following:

With the new panel, notice that there is a single line highlighted. Can you figure out the blue line? This is the underlying code of the menu item that you have recently “Inspected“.

Above that particular line, you will see the ID of the menu entry. Here the ID we are changing is 36 (yours can be different):

This was one way to change menu color in WordPress. 

STEP 2: Add custom CSS and change menu color in WordPress 

A little bit of CSS coding when added will help you to change the menu color in WordPress. Every theme is different but most of them will certainly have the option of Custom CSS in the Customizer.

Select Appearance > Customize and find the section related to custom CSS.

.menu-item-XXX {

          background: #ff0000 !important;

          border-radius: 5px;

          color: #ffffff !important;

}

.menu-item-XXX:hover {

          background: #000000 !important;

          border-radius: 5px;

          color: #ffffff !important;

}

.menu-item-XXX a {

          color: #ffffff !important;

}

.menu-item-XXX a:hover {

          color: #ffff00 !important;

}

When you write the right CSS code, it is time to replace all four X with the ID of the menu entry that you saw in STEP 1. Here the ID was 36. So every XXX is changed to 36:

You will see how the default button styling (red background with white text) is now different. Did you notice the change in colors?

Only the last step is left to change menu color in WordPress. Let’s complete that as well. However, you can also easily change Author in WordPress.

STEP 3: Change menu color in WordPress by customizing the colors as per your choice

The CSS had not so appealing colors. But you need something that stands out making you look amazing. Here is how every block will look like:

  • The first block .menu-item-XXX refers to the default navigation button background color (the sample is red).
  • The second block .menu-item-XXX: hover changes the navigation button background color when the visitor moves their mouse over it (the sample is black).
  • The third block .menu-item-XXX a is the default color of the text on the button (the sample is white).
  • The fourth block .menu-item-XXX a: hover changes the color of the text when the visitor moves their mouse over it (the sample is yellow).

Therefore, the hex color (example: #ffff00) is what you have to change so that it looks amazing and compliments your website.

Once you complete all the steps, you will be able to change the menu color and your website will look appealing. This is how to change menu color in WordPress.

Your Comment:

Related Posts

Change WordPress Theme

05

Jun
How To

How to Change WordPress Theme without Losing Content?

Do you want to change WordPress theme without losing content? If yes, this guide will help you. WordPress is a CRM that can be quickly modified. Your website may have been outgrown to an existing theme and would obviously look amazing with the added features. Altogether, a WordPress theme will accomplish everything.   All in all, you […]

Change WordPress Background Color

01

Jun
How To

How to Change WordPress Background Color of a Single Page?

The first thing any website visitor notices is the background color and font of a website. Agree? The background color gives a powerful impression of your business. Well, it’s one of the essentials of quality design. The color and the website visuals reflect your brand, style, readability, and even professionalism. This is the reason why deciding the[…]

Change Header Color in WordPress

27

May
How To

How to Change Header Color in WordPress

The reason for WordPress change header color may vary depending on your needs. Nowadays, changing your header color is easy. The WordPress (WP) Customizer needs to be adjusted so that everything works properly. Nonetheless, you must have the option to choose it in your theme. In other words, if your website doesn’t have the option to change[…]