Styling Parent menu items using core WP classes

We were using   ‘wp_nav_menu_objects’ filter to add a parent class to menu items which have sub-items.But since WordPress 3.7 we no need to use that filter as  we have ready-made classes ‘.menu-item-has-children’ , ‘.page_item_has_children’ available in the core.

Let’s take a look at Twenty Fourteen Theme , we can see that parent-menu items have a little arrow appended to them.

By inspecting the code we can see that these classes along pseudo-classes are to used to style the parent items.

.primary-navigation .menu-item-has-children > a,
.primary-navigation .page_item_has_children > a {
padding-right: 26px; // to give room to the arrow

.primary-navigation .menu-item-has-children > a:after,
.primary-navigation .page_item_has_children > a:after {
content: "f502"; //using after pseudo-class we are appending arrow
display: inline-block;
font: normal 8px/1 Genericons;
position: absolute;
right: 12px;
top: 22px;
vertical-align: text-bottom;
-webkit-font-smoothing: antialiased;

Ref: Adding visual Indicator

Leave a Reply

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