Have you seen those websites with a prominent menu item that draws your eye and makes you immediately want to buy a bunch of books? Well, I have, and I wanted one of those for my website. I thought it would be as easy as adding a class and some styling, but WP doesn’t actually allow you to set a class in the menu builder. Instead, it does the work for you. Let’s take a look.
The Menu Editor
As you can see, there are only two options when you configure a menu item.
Seems like an oversight, right? Well, it turns out that WP is automatically creating a class for you every time you create a menu item. All you have to do is look at the source code.
Load up the page, right click on the menu item you want to tyle, and click Inspect (or View Source and search, if that’s your thing).
I clicked on a “Buy Books” menu item, and as you can see in the source, WP has given it a custom class of menu-item-4102.
In your WP Admin, click Edit CSS under Appearance. This will get you to the Additional CSS page.
Using the custom class you wrote down from the previous step, create a new CSS class and give it some styling.
In this example, I wanted to change the normal dark gray background to a red that is used elsewhere in the Typology theme. Border-radius rounds off the corners to further set it apart.
You can preview your changes on that screen and then hit Publish.
Before / After
When it comes to the design aspect of Web Design, I know about as much as my toddler. Once someone explains to me why having a bold, noticeable color to draw attention to a button I want people to click, it makes sense to me. I understand why the after is better than the before. I just never would have gotten there on my own.
Here’s the before:
And after the change:
Don’t you just feel compelled to click that button?
I know I do.
I hope that helps someone add a little flair to their menu. I’m always in awe of some of the author websites I see out there. If yours is… not great… don’t worry. We’ll catch up to them someday!