Adding a class (arrows) to main menu links that have children?

by

I’m wondering if it is possible to add different classes to second/third/fourth/etc-level items that have children in Appearance > Menus tree?

That’s how I call the menu:

 <?php $menu_args = array(
    'container'       => '', 
    'menu_class'      => '', 
    'menu_id'         => 'my-menu',
    'walker'          => new Description_Walker);

    wp_nav_menu($menu_args );   
 ?>

I know every link owns different ID like <li id="menu-item-3230">, but I want the solution to be dynamic so I won’t have to edit code every time I change something. I guess the easiest way will be to attach additional class to these items but how?

enter image description here

4 Answers
4

There are two ways of doing this:

  • Javascript. You could use JQuery to select the <li> that have <ul> children of class ‘sub-menu’, inserting content, or appending a CSS class which you then style. For example: $('.sub-menu').parent().addClass('myclass')

  • PHP, a new walker function. Copy the code from wp-includes/nav-menu-template.php (until approx line 109) into your themes functions.php to create a new walker. Pass this walker as an argument to your menu call. In the modified Walker insert a <span> for an arrow on a sub-menu level item. 

    function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<span class=\"right-arrow\">&rarr;</span><ul class=\"sub-menu\">\n";
}

    This will add a small arrow that you can then style just before the sub-menu list item.

Leave a Comment