Arrow down in menu not displaying

by

I tried to add arrow down when the menu has a sub-menus. But the down arrow not showing up. Please help me.

Here’s the link: http://bit.ly/1UH4FlT

Currently using this script that I found somewhere.

function add_menu_parent_class( $items ) {
 $parents = array();
foreach ( $items as $item ) {
 if ( $item->current_page_ancestor && $item-> current_page_ancestor> 0 ) {
  $parents[] = $item->current_page_ancestor;
 }
}
foreach ( $items as $item ) {
 if ( in_array( $item->ID, $parents ) ) {
  $item->classes[] = 'menu-item-has-children';
 }
} 
 return $items;
}
add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );

And I added this css

#site-navigation .menu > ul > li.menu-item-has-children > a:before {
color: #fff;
content: "\f107";
font-family:FontAwesome;
font-size: 10px;
vertical-align: 1px;
}
#site-navigation .menu > ul > li > li.menu-item-has-children > a:after {
color: #222;
content: ""\f105"";
font-family:FontAwesome;
font-size: 10px;
vertical-align: 1px;
}

3 Answers
3

Add below code

#site-navigation .menu > ul > li.menu-item-has-children > a::after {
content: '\f107';
font-family: FontAwesome;
font-size: 10px;
margin-left: 10px;
vertical-align: 1px;
}


#site-navigation .menu > ul > li > ul > li.menu-item-has-children > a::after {
color: rgb(34, 34, 34);
content: '\f105';
font-family: FontAwesome;
font-size: 10px;
vertical-align: 1px;
float: right;
}

Add 3rd level navigation.
If you face any issues, reply.

Leave a Comment