Change the color of one menu item (like red for the holidays) (All Themes)

Depending on the time of year—or even the menu item at hand—some users may wish to target a specific item in a menu, and give it unique styling (such as its own color!). This can be done across any of our themes.


1. First, you'll need to add a special class to the menu item you want to color. Go to Appearance > Menus and expand the menu item you want to edit. Look for a box that says "CSS Classes." If you don't see the box, you'll need to enable it in the Screen Options tab.

We've added the class "holiday-red" below as an example, but you can name it whatever you like. Don't forget to replace any spaces with a dash! The more specific your class name, the more likely you'll reduce potential conflicts in the future.

2. Next, go to Appearance > Customize and add the following code under the Additional CSS tab.

Replace "holiday-red" with the class you've chosen, and #BB0000 with the hex color of your choice. You can also add additional styling here, such as adjusting the font weight, or adding a background and padding to make the link a button.