Question

in order to make the following output i used wordpress custom walker

class Walker_Page_Custom extends Walker_Nav_Menu {

function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent
        <div class='nav-dropdown' style='display: block; height: 1.2534674133206636px; overflow: hidden;'>
         <div class='drop-col'>
          <img id='prod' src='#' rel='#' alt='Womenswear'>
         <ul class='level0'>
         <li id='menu-item'>

    \n";
}

function end_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent
           </li>
          </ul>
          </div>
         </div>
    \n";
}

}

here is my current output

<li id="menu-item-310" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-310">
    <a href="http://localhost/wp/products-page/" class="sf-with-ul">Products Page</a>
    <div class="nav-dropdown"> <!-- first one -->
        <div class="drop-col"> <!-- first one -->
            <img id="prod" src="" rel="" alt="Womenswear">
            <ul class="level0">
                <li id="menu-item-311" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-311"><a href="http://localhost/wp/products-page/your-account/">Your Account</a></li>
                <li id="menu-item-312" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-312"><a href="http://localhost/wp/products-page/transaction-results/">Transaction Results</a></li>
                <li id="menu-item-313" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-313"><a href="http://localhost/wp/products-page/checkout/" class="sf-with-ul">Checkout<span class="sf-sub-indicator"> »</span></a>
                    <div class="nav-dropdown"><!-- second one -->
                        <div class="drop-col"><!-- second one -->
                            <img id="prod" src="#" rel="#" alt="Womenswear">
                            <ul class="level0">
                                <li id="menu-item-314" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-314"><a href="http://localhost/wp/products-page/checkout/order-received/">Order Received</a></li>
                                <li id="menu-item-315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-315"><a href="http://localhost/wp/products-page/checkout/pay/">Checkout ? Pay</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</li>

if you notice, there is <div class="nav-dropdown"> and <div class="drop-col"> inside the first <div class="nav-dropdown"> and <div class="drop-col">

so i need to change the class of the second <div class="nav-dropdown"> and <div class="drop-col"> to we can say <div class="inner-nav-down"> and <div class="inner-drop-cll"> or any other class, i don’t care

any suggests to edit this custom walker to do the job?

Answer 1

function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $inner = $depth ? 'inner-' : '';
    $output .= "\n$indent
        <div class='".$inner."nav-dropdown' style='display: block; height: 1.2534674133206636px; overflow: hidden;'>
        <div class='".$inner."drop-col'>
        <img id='prod' src='#' rel='#' alt='Womenswear'>
        <ul class='level0'>
        <li id='menu-item'>

    \n";
}