The standard menu in WordPress, while powerful and easy to add onto almost any theme, leaves a bit to be desired when it comes to styling.
Not to mention, the built-in WordPress menu classes can be quite confusing. There’s menu-item-type-taxonomy, current-menu-parent, current-menu-ancestor, and a whole bunch of other confusion selectors you can choose from to make styling your menu about as fun as pulling out your hair.
A standard WordPress menu looks like this:
Gray bar with a darker gray hover. Not too much to look at right?
Just to put a simple red background hover would require you to know a few CSS selectors, and their names are quite long.
But, thankfully, WordPress also gives you the functionality to add custom classes to your menus – which makes styling them a much easier process.
So, rather than using your browser developer tools to target some baked-in, almost nonsensical menu name, you can create your own menu classes that are much easier to remember and alot easier to style.
Turn on Custom Classes in the WordPress Menu Admin
To use custom classes they have to be shown. You do this in your menu admin area.
Make sure to select the “CSS CLASSES” item in screen options and then return to your menu. You’ll notice a new box has been added to your menu items.
You can enter any name into this box. You don’t want to use any selectors like # or . (period). Just enter the class text like shown in the image below.
I’ve chosen the class name redback which is easy to remember.
After the menu is saved you can enter custom CSS anywhere you would normally do that – either in your style.css file or in a custom css plugin.
Here, I’ve chosen the following CSS rule:
That targets any item tagged with custom class redback and changes its hover state to use a red background.
You can even use the custom classes to add logos to your menu items like this:
The same principles follow with the custom classes. For more information on adding logos to your menus, checkout these two articles:
- How to Open WordPress Menu Links in a New Window Find out how to make use of the advanced menu…
- Style Your WordPress Menus With Custom CSS Find out how you can create custom CSS styles for…
- How to Create a WordPress Menu Link That Isn’t Clickable Here’s a quick and simple tip for use when creating…