Change Menu Colors in WordPress

How to Change Menu Colors in WordPress

by

Customize the color or your WordPress Website’s Menu

Most of the WordPress themes that are out there allow you to change the color of your menu items, which is a great way through which you can increase the visual appeal of your website. However, if your theme is like mine, the unfortunate thing is that you won’t be able to implement these simple changes, without making a few tweaks. In my case, that is probably because I have been something of a cheepo and have not yet made the move to the paid version of my favorite theme, which comes with a lot more features. So, how do you change menu colors in WordPress? Is there a simple way through which you can customize the appearance of your menu items?

Change Menu Colors in WordPress

To change menu colors in WordPress, all that you need to do is the following;

  1. On the front page of your site, right click beside the menu items whose colors you wish to change.
  2. Choose “Inspect Element (Q).”
  3. Take note of the name, the “ul id,” that is given to your menu items. On this website, the “ul id” for the primary menu is “menu-primary-items.” That of the secondary menu is “menu-secondary-items.”
  4. Now, either on the front page of your website (if you are signed in), or in the back-end, click on “Customize.”
  5. Click on “Additional CSS,” among the items that appear.
  6. Paste the following piece of code into the space that’s provided;

#ul id li.menu-item a {
color:#2929fc;
}

The ul id

Note that you need to replace ul id with the id that you identified earlier on when you inspected element q. On my website, that’s, as mentioned earlier, “menu-primary-items,” for the primary menu. So, in my case, my code looks like this;

#menu-primary-items li.menu-item a {
color:#2929fc;
}

The Color Code

Now, the only thing that remains for you to do is to change the color code to the one that your prefer for your menu. If you are not sure about the code that you would like to have for your menu, its a simple enough matter of using Google to get what you are looking for. That, in any case, is how you Change Menu Colors in WordPress. You can also bold the headers in your WordPress website by following the steps that are outlined here.

Leave a Comment