HSR Technologies is a Top Rated agency on Upwork.com, Please check our Upwork profile for more details.

How to add arrow to parent menu in wordpress navigation

We sometimes need to add a small arrow to indicate that there is a submenu for a menu item in navigation. There is no direct way of adding a css class to parent menus in wordpress, however i found following piece of code on stack overflow, this is an easy way to add a CSS class to parent menu item.

Step 1. Add following code in functions.php

<?php
class Arrow_Walker_Nav_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, 
                              $depth=0, $args, &$output) {
        $id_field = $this->db_fields['id'];
        if (!empty($children_elements[$element->$id_field])) {
            $element->classes[] = 'arrow'; //enter any classname you like here!
        }
        Walker_Nav_Menu::display_element($element, $children_elements, $max_depth, 
                                         $depth, $args, $output);
    }
}
?>

Step 2: You need to add the walker argument when you call wp_nav_menu() in your theme:

<?php wp_nav_menu(array('walker' => new Arrow_Walker_Nav_Menu, [other arguments...])) ?>
  • thanks for the post sir,it helped a lot.can you please explain how can we keep startHere arrow indication in menu Bar as shown here at shoutmeloud.com ,i have asked mr.harsha aggrawal he replied it came inbuilt in child theme .How can we design it in menubar of other themes .

    thank you.