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

About bravokeyl


Bravokeyl is just a normal guy who loves to code.He has been one sided WordPress lover since 2010. He develops WordPress themes and plugins,love to support community during free time.

Leave a Reply