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:
1 |
.redback a:hover{background:red;}
|
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:
Thanks! This could come in handy when I get around to developing a members only section with user-dependent menus using the Membership.
Great use of that Jim.
I’ll be doing a detailed walk through this coming week of the marketpress plugin – setting up an ecommerce site.
Then after that, we’ll be tying that in with membership as well.
The goal is to launch a fully-functional member/e-commerce site, and you can do it all with the WPMUDEV plugins. It’s gonna be a good show.
of course, if you need help with your site when you get that membership plugin installed – we’re always around.
Good luck!
OK, testing commenting as a logged in user!