• Skip to main content

WP Republic!

High Profile WordPress Security Services by WP Republic!

  • Blog
  • Malware Removal
  • Fix Request
  • Security Plans
  • About us
    • FAQ
    • Contact
    • Privacy Policy
    • Terms of Service

Sep 03 2018

How to customize your WordPress menu background color

How to use the WordPress menu CSS Classes feature

Sometimes, you want one of your WordPress menu items to have a bolder look. For example, we’re proud of our WordPress Malware Removal Services, so we wanted to feature this service in our top menu and make it show under a different background color to stand out from the other menu items.

We used the WordPress Menu CSS Classes feature for this task, which comes with the default WordPress setup. Most of you may have never seen or knew about it because it remains hidden by default, so you must enable it first. Below, we’ll show you how to enable and use WordPress Menu CSS Classes to change how your menu looks.

1. Enable your WordPress Menu CSS Classes feature

Go to your Menu page, then scroll up and find the Screen Options option on the right part of your screen. Click it, and it will enable the CSS Classes option.

2. Add a CSS class in your WordPress menu item(s)

Please stay on the Menu page and select the menu item you want to change its background. Then add a CSS Class, this has to be unique and not used from your theme so make sure you come up with one that is hard to guess. For example, you can add the current year(2018) at the end of it, like we did(mynewclass2018).

3. Add the WordPress menu CSS custom code

This is probably the most challenging part because you will need to add the following CSS code to your theme:

.mynewclass2018 {

background-color: #6d6306;

}

Where #6d6306 is the HTML color code you want to use as the background color.

If you use a child theme, you can add the code inside your style.css file or the Custom CSS theme feature if available. The last solution applies to any other theme with an admin panel and lets you add custom CSS code.
If your theme is not a child theme or doesn’t support changing the CSS from your WordPress Dashboard, we strongly suggest installing a plugin like Simple Custom CSS to do the job. Then go to the Customize page, scroll, find the “Simple Custom CSS” option, and add the custom CSS code. Finally, save, and you’re good to go.

4. Repeat for any other or all of your menu items

You can follow the same steps to change any other(or all) of your WordPress menus. Apart from changing the background color, you can change the font color and weight and use any other class setting you want.

Written by WP Republic! · Categorized: Blog · Tagged: CSS Classes, Menu, WordPress

SUBSCRIBE TO OUR GOODIES LIST!

Reader Interactions

Comments

  1. matlida huni says

    February 11, 2020 at 11:10 am

    I was trying to change the font color of the menu. Thank you for your valuable help. It worked.

    Reply
  2. Alexamedia says

    November 11, 2020 at 5:08 am

    Very usefull CSS code

    Reply
  3. bataamongolia says

    September 3, 2021 at 12:12 pm

    Thank you very much! Very good lesson.
    I have question, will it stay for good after wordpress theme update?

    Reply
    • WP Republic! says

      September 3, 2021 at 2:04 pm

      Yes, it will.

      Reply
      • bataamongolia says

        September 3, 2021 at 2:56 pm

        Thank you very much!

        Reply
  4. sasha says

    August 19, 2022 at 12:54 pm

    There isn’t an option to add the CSS claass on the menu item

    Reply
    • WP Republic! says

      August 19, 2022 at 2:04 pm

      Hello Sasha!

      Can you share a screenshot of your menu items? Did you try enabling this feature through the Screen Options on the top right of your browser window(Step 1. of the Tutorial)?

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2025 · Security Services · WP Republic!
This website is not affiliated with or sponsored by Automattic or the WordPress Open Source project