Modify your theme to add dropdown menu arrows | LearnWP

Modify your theme to add dropdown menu arrows

How to 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

dropdown-indicator

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?

Related Posts

If you liked this post, you might also be interested in one of these.
6 tips to pin like a pro - Pinterest
Own your website | What every website owner needs to know

11 thoughts on “Modify your theme to add dropdown menu arrows”

  1. Hi, thank so much for this article!
    It worked great for me! The only difference is that I used custom icons as pictures through your code 🙂

    I wanted to ask though. is it possible to make it so, if a person clicks on the dropdown the icon will change? For example from down arrow to up arrow?

  2. Can I do this within the program without using code as I don’t understand that stuff? I thought there was an option in Appearance – menu in word press.

Leave a Comment

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

Scroll to Top