Wordpress walker is working, but not correctly

Question

Last year I managed to add additional elements into my Wordpress menu by using a walker. (How can I add parent menu description to my Wordpress menu?)

Currently, the walker look slike this in my functions file:

// Submenu walker to add image
class submenu_walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        global $description;
        $output .= "<ul class='sub-menu'><li class='menu-image-container'><div class='menu-image'></div><div class='menu-description'>".$description."</div></li>";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "<li><div class='clear'></div></li></ul>";
    }
}

Essentially, what I wanted to do was to add an image and a short description to each first level sub menu on the website: www.bellavou.co.uk

If you visit this site, you'll see it looks fine, because I've used CSS to hide all the other instances I don't want shown. But if you inspect, you'll see that a menu-image container is added for every submenu within the parent menu items.

i.e. Inside 'Face', there is a menu-item div within the 'Face', 'Eye' and 'Ear' submenu, as well as the one that's showing inside the main sub-menu.

I only want the main one to show, and I Think this is achieved by changing the depth settings, but I've tried and it's not making any changes.

What can I do to only create the new sub-menu once within the top level parent sub-menu?

UPDATE & SOLVED:

Turns out I was thinking along the right lines, in terms of depth where the rules get applied. But didn't think about the existing sub menus I have.

// Submenu walker to add image
class submenu_walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        if(0 == $depth) {
            global $description;
            $output .= "<ul class='sub-menu'><li class='menu-image-container'><div class='menu-image'></div><div class='menu-description'>".$description."</div></li>";
        } else {
            $output .= "<ul class='sub-menu'>";
        }
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        if(0 == $depth) {
            $output .= "<li><div class='clear'></div></li></ul>";
        } else {
            $output .= "</ul>";
        }
    }
}

This has now fixed it with only the image div appearing once at the very top of the parent sub-menu, and the others just displaying their child items.

Answer 1

I hope I've understand your question correctly. If you wish this image containers only for one level, then you can check if ( $depth == $desired_level)

// Submenu walker to add image
class submenu_walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        if ( $depth == 0 ) {
            global $description;
            $output .= "<ul class='sub-menu'><li class='menu-image-container'><div class='menu-image'></div><div class='menu-description'>".$description."</div></li>";
        } else {
           $output .= "<ul class='sub-menu'>";
        }

    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        if ( $depth == 0 ) {
            $output .= "<li><div class='clear'></div></li></ul>";
        } else {
           $output .= "</ul>";
        }
    }
}

I'm not sure whether $depth should be 0 or 1 in your case, try it.