Modify your theme to add dropdown menu arrows

Dropdown menu arrows let a user knows there is more content available. They can provide an important visual queue so site users understand how to best navigate through a website.

A former student asked how to add these indicators to her Responsive Child theme.  Here is the code that can be added to a child theme.

Before you make any code edits backup! Use at your own risk.

Step 1: Create a functions.php file with this code

If you don’t already have a functions.php file in your child theme you’ll need to create one with the opening php tag. If you already have a functions.php file, open it and copy the code below omitting the opening tag.

This isn’t my original code I found it  here » on github.

<?php
// add arrows to menu parent 
function oenology_add_menu_parent_class( $items ) {
 
 $parents = array();
 foreach ( $items as $item ) {
 if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
 $parents[] = $item->menu_item_parent;
 }
 }
 
 foreach ( $items as $item ) {
 if ( in_array( $item->ID, $parents ) ) {
 $item->classes[] = 'has-children';
 }
 }
 
 return $items;
}
add_filter( 'wp_nav_menu_objects', 'oenology_add_menu_parent_class' );

Step 2: Add this to the style.css file

This will put add and style the arrows. Please adjust the hex colour code to style for your site.

.menu li.has-children > a:after {
 color: #fff;
 content: ' ▼';
 font-size: 10px;
 vertical-align: 1px;
}
.menu li li.has-children > a:after {
 color: #222;
 content: ' ►';
 font-size: 10px;
 vertical-align: 1px;
}

Step 3: Upload to your Child Theme

Update the functions.php file and the style.css file for your Child Theme folder by FTP

That should do the trick!  Why not add a comment below to showcase your menu with a dropdown menu arrow?