I'm creating a website for my school with Material Design for Bootstrap and the NavWalker is giving me some issues, I want to change the element of dropdown i.e. from ul to div. I've tried to edit the NavWalker.

$output .= "\n$indent<div class=\" dropdown-menu dropdown-primary\" aria-labelledby=\"navbarDropdownMenuLink\" >\n";

I've edited the code and replaced the DIV instead of UL but don't know how to close the DIV. When I opened the Source Code it display like this

<div class=" dropdown-menu dropdown-promary" aria-labelledby="navbarDropdownMenuLin*k" >
    <li  class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a title="About Us" href="/">About Us</a></li>
    <li  class="menu-item menu-item-type-custom menu-item-object-custom menu-item-63"><a title="Year Plan" href="/">Year Plan</a></li>
    <li  class="menu-item menu-item-type-custom menu-item-object-custom menu-item-64"><a title="Staff" href="/">Staff</a></li>
    <li  class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a title="Fee and Uniform" href="">Fee and Uniform</a></li>
</ul>

This spoiled my navbar! Please help if anyone knows how to solve this issue. These are the links to NavWalker and the one that I've edited.

The original NavWalker file in text file Original NavWalker

The original NavWalker file in text file The Modified One

I'm creating a website for my school with Material Design for Bootstrap and the NavWalker is giving me some issues, I want to change the element of dropdown i.e. from ul to div. I've tried to edit the NavWalker.

$output .= "\n$indent<div class=\" dropdown-menu dropdown-primary\" aria-labelledby=\"navbarDropdownMenuLink\" >\n";

I've edited the code and replaced the DIV instead of UL but don't know how to close the DIV. When I opened the Source Code it display like this

<div class=" dropdown-menu dropdown-promary" aria-labelledby="navbarDropdownMenuLin*k" >
    <li  class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a title="About Us" href="http://example/about/">About Us</a></li>
    <li  class="menu-item menu-item-type-custom menu-item-object-custom menu-item-63"><a title="Year Plan" href="http://example/year-plan/">Year Plan</a></li>
    <li  class="menu-item menu-item-type-custom menu-item-object-custom menu-item-64"><a title="Staff" href="http://example/staff/">Staff</a></li>
    <li  class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a title="Fee and Uniform" href="http://example/fee-and-uniform">Fee and Uniform</a></li>
</ul>

This spoiled my navbar! Please help if anyone knows how to solve this issue. These are the links to NavWalker and the one that I've edited.

The original NavWalker file in text file Original NavWalker

The original NavWalker file in text file The Modified One

• php
• menus
• dropdown

1 Answer 1

You need to replace the end_lvl method of Walker_Nav_Menu as well. This is what you would need to add:

public function end_lvl( &$output, $depth = 0, $args = array() ) {
    if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
        $t = '';
        $n = '';
    } else {
        $t = "\t";
        $n = "\n";
    }
    $indent = str_repeat( $t, $depth );
    $output .= "$indent</div>{$n}";
}

The only change from the original is the </ul> was changed to </div>