How to Make WordPress Display Menus in Multiple Colors

hedgehog-mascot

Using colors on your blog is an excellent idea. If you keep your colors simple and consistent, they emphasizes your blogs color branding. Also, they are nice. One place where you can utilize colors is your menus. WordPress enables you to create multicolored menus in a few simple steps.

Step One — Add CSS

Add the following lines of code to your stylesheet. To do this, go to Appearance > Edit CSS in your WordPress Dashboard. In order to have this option available, you need to have Jetpack installed and within it the Custom CSS module activated.

If you don’t want to install Jetpack, which is a shame because it is awesome, then you can add the code directly into your theme’s stylesheet at WordPress Dashboard > Appearance > Editor > style.css.

The above code will only colorize your menu items’ background when your visitors hover over them with their mice.

In case you want to have them colorized at all times, use a:link instead of a:hover in the code above.

The color codes in the above example are the official stosu.com colors. To select your own colors, you will need their hexadecimal color codes. A good place to obtain those and to fiddle around with colors is the ColorHexa website.

After you are done entering your code, click on the Save Stylesheet button or, in case you are adding the code directly to your style.css file — the Update File button.

Step Two — Activate CSS Classes

wp-screen-options-css-classes

WordPress screen options CSS Classes

Go to WordPress Dashboard > Appearance > Menus. Click on the Screen Options button in the upper-right corner of the window.

In the roll-down menu, tick the CSS Classes checkbox under Show advanced menu properties.

Step Three — Fill in the Boxes

css-class-to-menu-item

CSS class to menu item

Still in the Menus section, select one of your menus to edit and click Select. If you don’t have a menu yet, click create a new menu.

When you click on the down-arrow next to a menu item under Menu Structure, all available options for that menu item are displayed.

One of them is called CSS Classes (optional). Fill in the appropriate names of your CSS classes from Step One of this tutorial. You can create and use as many CSS classes as you wish, i.e. you can use two, five, or even twenty colors in your menus. It is completely up to you.

When you are done, click on the Save Menu button for the changes to take effect.

And ta-da, that’s it. Now your menus will be nice and colorful.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:

Next Post »« Previous Post

Leave a Reply

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