Create Sub Menu Indicators in WordPress Menus

If a menu has child elements it come sin handy to have a sub menu indicator such as tiny little arows showing that there is more below. Some themes do not support this by default but it is pretty easy to accomplish this task since most menus use the same css structure.

Add this to the styles.css or a custom css are in the theme settings. Customize it as you please.

.menu-item-has-children > a:after {
 content: "\f347";
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 16px/1 'dashicons';
 padding-left: 2px;
 vertical-align: top;
 }

Since this uses the wordpress internal dashicons library you might need to load this also in the frontend even if no user is signed in (it is always loaded if the admin bar is shown – so don’t be fooled by thinking you don’t need it only by checking while you are signed in).

Add this to your themes functions.php file:

//enable dashicons in frontend
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

function mytheme_scripts() {
 wp_enqueue_style( 'dashicons' );
}