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

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.