Are you wondering how to change color of menu text in WordPress? If you are – this quick and easy to follow tutorial is just for you.
Your WordPress theme may have limited options when it comes to the design of your WordPress site. Some WordPress themes do not have a theme panel at all where you can change basic settings such as colors. In this article we will show you some tricks how to change the color of menu text in WordPress, without the need to spend extra money on some premium themes or to hire a developer to complete this task for you. You can follow our instructions and you will be able to easily change the color of menu text to colors that match your site design.
As we have already stated, the simplest way to change the menu color is within the theme panel.
Log in to your admin dashboard, click on “Appearance” and then on “Customize.” A new window will open where you can adjust basic settings on your WordPress theme.
The theme we are using now includes a “Colors” option where we can set the menu color very easily. We simply just need to drag the slider to the desired color and our work is done in seconds.
You have seen that this can be an easy task.
However, what if your theme does not have an option where you can change the menu color? Keep reading, some good tricks follow.
1. Change menu colors using additional CSS
You can change the color of your menu by simply adding custom CSS where you will define your new look.
To do this, first right-click on your menu and select the “Inspect” option (We’ve used Chrome). Find the CSS tag that is responsible for the appearance of your menu.
After you’ve identified which part of CSS is responsible for the menu’s appearance, go back to the dashboard, click “Appearance” and then “Customize” and select the last option in the list called “Additional CSS.”
Enter the CSS code and define the way you want your menu to look. For demonstration purposes our code is:
Once you’ve entered the CSS, you’ll see all the changes you’ve made to your menu in real time.
See how it looks for us in the picture below:
For demonstration purposes, we’ve increased the menu font size to 150% and defined the desired color. You can put whatever options you want, without any restrictions. It is essential that you know the basics of CSS and that you know how to identify the element that defines the appearance of your menu.
2. Change menu colors using HTML
It’s worth mentioning that you can also change the color of your menu using HTML. This is perhaps a simpler option that will appeal more to people who are not experienced WordPress users or do not know how to work with CSS. The only downside to this way of editing your menu is that you have to edit one menu item at a time. This can be problematic if you have a large menu with many sub-menus because it will be tedious and time-consuming.
Log in to your WordPress dashboard, click on “Appearance” and then on “Menus.” Click on your menu that you want to edit.
Now click on any item within your menu. I’m going to edit “Contact” because I want that menu item to be red. With one line of code our job is done.
In “Navigation label” enter this code:
<font color=”db0909″>Contact</font>
You can see how it looks like in the picture below:
You can use the mentioned codes on all menu items. If you don’t know color codes, you can simply Google “Color hex codes” and you’ll get a list of all the colors and their codes you can use.
We hope this article was useful to you. We showed you how to change the color of menu text in WordPress using additional CSS and HTML. Although today most WordPress themes have a theme panel where you can change all the colors, there are themes that you will like, but do not have this option. Don’t forget to make a backup of your pages before making any changes so you can restore them to their initial state in case of unwanted results.