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

Subscribe to Our Blog Updates!

Subscribe to Our Free Email Updates!

Share this article!

Buffer

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>