The usual menu in WordPress, whereas highly effective and simple so as to add onto virtually any theme, leaves a bit to be desired in terms of styling.
To not point out, the built-in WordPress menu courses will be fairly complicated. There’s menu-item-type-taxonomy, current-menu-parent, current-menu-ancestor, and a complete bunch of different confusion selectors you may select from to make styling your menu about as enjoyable as pulling out your hair.
A typical WordPress menu can appear like this:
On this case, a grey bar with a darker grey hover. Not an excessive amount of to have a look at, proper?
Simply to place a easy pink background hover would require you to know a couple of CSS selectors, and their names are fairly lengthy.
However fortunately, WordPress additionally offers you the performance so as to add customized courses to your menus – which makes styling them a a lot simpler course of.
So, relatively than utilizing your browser developer instruments to focus on some baked-in, virtually nonsensical menu title, you may create your personal menu courses which might be a lot simpler to recollect and quite a bit simpler to model.
Activate Customized Courses within the WordPress Menu Admin
To make use of customized courses they need to be proven. You do that in your menu admin space.
Be certain that to tick the verify field for the CSS Courses merchandise within the Display screen Choices dropdown menu. Afterwards, open the Web page you wish to edit. You’ll discover a brand new part has been added to your menu objects.
You possibly can enter any title into this field. You don’t wish to use any selectors like # or . (interval). Simply enter the category textual content like proven within the picture beneath.
I’ve chosen the category title redback which is simple to recollect.
After the menu is saved you may enter customized CSS anyplace you’d usually try this – both in your model.css file or in a customized css plugin.
Right here, I’ve chosen the next CSS rule:
That targets any merchandise tagged with customized class redback and adjustments its hover state to make use of a pink background.
You possibly can even use the customized courses so as to add logos to your menu objects like this:
The identical rules observe with the customized courses. For extra data on including logos to your menus, checkout these two articles:
WordPress Customized Menu Objects
Or, try this extra article about WordPress Menus:
9 jQuery WordPress Menu Plugins + Bonus Tutorial for the Adventurous
Editor’s Word: This submit has been up to date for accuracy and relevancy.
[Originally Published: December 2012 / Revised: April 2022]
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!