1

I am converting a static website made with Bootstrap in WordPress. Here is my bootstrap multilevel navigation menu code:

<section class="menuBar">
    <nav class="navbar navbar-expand-lg navbar-light" data-toggle="sticky-onscroll">
        <div class="container">
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar-collapse collapse" id="mainNavbar" style="">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Commercial Appliances</a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item dropdown-toggle" href="#">Refrigeration</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Refrigerators</a></li>
                            <li><a class="dropdown-item" href="#">Freezers</a></li>
                            <li><a class="dropdown-item" href="#">Walk-in Coolers/Refrigerators</a></li>
                            <li><a class="dropdown-item" href="#">Walk-in Freezers</a></li>
                            <li><a class="dropdown-item" href="#">Commercial Freezers</a></li>
                            <li><a class="dropdown-item" href="#">Commercial Refrigerators</a></li>
                            <li><a class="dropdown-item" href="#">Salad Bars</a></li>
                            <li><a class="dropdown-item" href="#">Sandwich Coolers</a></li>
                            <li><a class="dropdown-item" href="#">Wine Coolers</a></li>
                            <li><a class="dropdown-item" href="#">Ice Machines</a></li>
                            <li><a class="dropdown-item" href="#">Beer Coolers</a></li>
                            <li><a class="dropdown-item" href="#">Kegerators</a></li>
                            <li><a class="dropdown-item" href="#">Flower Coolers</a></li>
                            <li><a class="dropdown-item" href="#">Remote Condensers</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Cooking Equipment</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Commercial Ovens</a></li>
                          <li><a class="dropdown-item" href="#">Stoves/Ranges</a></li>
                          <li><a class="dropdown-item" href="#">Cooktops</a></li>
                          <li><a class="dropdown-item" href="#">Convection Ovens</a></li>
                          <li><a class="dropdown-item" href="#">Salamander Ovens/Broilers</a></li>
                          <li><a class="dropdown-item" href="#">Double Ovens</a></li>
                          <li><a class="dropdown-item" href="#">Grills</a></li>
                          <li><a class="dropdown-item" href="#">Wall Ovens</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown-item" href="#">Microwaves</a></li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Griddles</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Hot Plates</a></li>
                          <li><a class="dropdown-item" href="#">Wok Ranges</a></li>
                          <li><a class="dropdown-item" href="#">Warmers</a></li>
                          <li><a class="dropdown-item" href="#">Deep Fryers</a></li>
                          <li><a class="dropdown-item" href="#">Steam Table</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Ice Machines / Ice Makers</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Countertop</a></li>
                          <li><a class="dropdown-item" href="#">Remote condenser</a></li>
                          <li><a class="dropdown-item" href="#">Modular</a></li>
                          <li><a class="dropdown-item" href="#">Under counter</a></li>
                          <li><a class="dropdown-item" href="#">Water filters</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Commercial Dishwashers</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Door Type</a></li>
                          <li><a class="dropdown-item" href="#">Conveyor Type</a></li>
                          <li><a class="dropdown-item" href="#">Under counter</a></li>
                          <li><a class="dropdown-item" href="#">Glasswasher</a></li>
                          <li><a class="dropdown-item" href="#">High Temperature Dishwashers</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Commercial Laundry</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Washers</a></li>
                          <li><a class="dropdown-item" href="#">Tumble Dryers (Gas/Electric)</a></li>
                          <li><a class="dropdown-item" href="#">Coin-operated Washer / Dryer</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Ventilation / Exhaust</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Commercial Kitchen Hoods</a></li>
                          <li><a class="dropdown-item" href="#">Exhaust Fans</a></li>
                          <li><a class="dropdown-item" href="#">Direct Drive Fans</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Water Heaters</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Electric / Gas Tankless Heaters</a></li>
                          <li><a class="dropdown-item" href="#">Electric / Gas Tank Heaters</a></li>
                        </ul>
                    </li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Garbage Disposals</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Food Wasters</a></li>
                        </ul>
                    </li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Residential Appliances</a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">Refrigerators / Freezers</a></li>
                    <li><a class="dropdown-item" href="#">Wine  Cooler</a></li>
                    <li><a class="dropdown-item" href="#">Ice Makers</a></li>
                    <li><a class="dropdown-item" href="#">Washer Machine</a></li>
                    <li><a class="dropdown-item" href="#">Gas / Electric Dryer</a></li>
                    <li><a class="dropdown-item" href="#">Wall Ovens</a></li>
                    <li><a class="dropdown-item" href="#">Double Ovens</a></li>
                    <li><a class="dropdown-item" href="#">Ranges</a></li>
                    <li><a class="dropdown-item" href="#">Cooktops</a></li>
                    <li><a class="dropdown-item" href="#">Microwaves</a></li>
                    <li><a class="dropdown-item" href="#">Dishwasher</a></li>
                    <li><a class="dropdown-item" href="#">Garbage Disposal</a></li>
                    <li><a class="dropdown-item" href="#">Vent Hood</a></li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">HVAC</a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">Split system </a></li>
                    <li><a class="dropdown-item" href="#">Minisplit Ductless systems</a></li>
                    <li><a class="dropdown-item" href="#">Packaged System</a></li>
                    <li><a class="dropdown-item" href="#">Gas / Electric Furnace</a></li>
                    <li><a class="dropdown-item" href="#">Heat Pumps</a></li>
                    <li><a class="dropdown-item" href="#">Evaporator Coils</a></li>
                    <li><a class="dropdown-item" href="#">Thermostat</a></li>
                  </ul>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Installation</a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item dropdown-toggle" href="#">Refrigeration Equipment</a>
                      <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Walk-in Cooler Installation</a></li>
                          <li><a class="dropdown-item" href="#">Ice Machine</a></li>
                      </ul>
                    </li>
                    <li><a class="dropdown-item" href="#">Cooking Equipment</a></li>
                    <li><a class="dropdown-item" href="#">Commercial Dishwashers</a></li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Commercial Laundry</a>
                      <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Washers</a></li>
                          <li><a class="dropdown-item" href="#">Dryers</a></li>
                      </ul>
                    </li>
                    <li><a class="dropdown-item" href="#">HVAC</a></li>
                    <li><a class="dropdown-item" href="#">Ventilation / Exhaust</a></li>
                    <li><a class="dropdown-item" href="#">Water Heaters</a></li>
                    <li><a class="dropdown-item" href="#">Garbage Disposals</a></li>
                  </ul>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="maintenance-programs.php">Maintenance Programs</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="contact.php">Contact Us</a>
                </li>
              </ul>
            </div>
            <a class="btn btn-red" href="#">Book Now</a>
          </div>
        </nav>
      </section>

And it's working fine for me: enter image description here

But to in WordPress, I have used WP_Bootstrap_Navwalker() for the navigation menu. I have put depth => 3 but it's not showing multi level menu as expected. Here is my code:

<?php
    wp_nav_menu( array(
        'theme_location'    => 'primary',
        'depth'             => 3,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'mainNavbar',
        'menu_class'        => 'navbar-nav',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker()
    ) );
?>

But it's just working for dropdown only. It's not showing submenu of submenu. How can I fix this problem?

enter image description here

  • 1
    i think as per the developer documentation only two option exits : 'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns. – Latheesh V M Villa Jul 18 '18 at 23:19
  • 1
    did you link the navwarker class file in your theme's functions.php file? follow the link github.com/wp-bootstrap/wp-bootstrap-navwalker incase you missed anything – maverick Jul 19 '18 at 5:35
  • @maverick yes. I have linked in theme functions.php file very well. – Milan Bastola Jul 19 '18 at 14:26
1

Here some thing interesting for you

STEP 1 add a script to header like below ( it's always better go for the enqueue method . i need some one to help me with properly adding the below script in WordPress way .jquery should run before the second script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show');


  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass("show");
  });


  return false;
});
});

</script>

STEP 2 Add the css like below :

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}
/* to show the arrow */
.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}
.dropdown-toggle a::after{
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

STEP 3 Now go inside the walker class : search for && 0 === $depth and remove it. Also make sure that
'depth' => 3

Now it should start showing the 3rd level menu . some additional css might be required.

This is being added up in header :

wp_nav_menu( array(
                'theme_location'    => 'primary',
                'depth'             => 3,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                'walker'            => new WP_Bootstrap_Navwalker(),
            ) );
  • 1
    @MilanBastola it's working perfectly for me.could you add the html being generated? After doing the procedures above – Latheesh V M Villa Jul 19 '18 at 16:07
  • 1
    That is exactly same as mine. Not sure why it not working for you double check if the script is being added up and css is being applied. My walker class is from : github.com/wp-bootstrap/wp-bootstrap-navwalker ...also check the updated answer wp_nav_menu(array()); – Latheesh V M Villa Jul 19 '18 at 18:07
  • 1
    @MilanBastola check your wp_nav_menu(array()); . It seems different : 'container_id' => 'bs-example-navbar-collapse-1','menu_class' => 'nav navbar-nav', – Latheesh V M Villa Jul 19 '18 at 18:17
  • 1
    @MilanBastola try changing array same as i provided in the answer. I have updated the answer – Latheesh V M Villa Jul 19 '18 at 18:20
  • 1
    @MilanBastola Great! if the answer is correct you may accept the answer. You have to add a small css to show the arrows up.Have a check at the new css . I have updated the css in answer – Latheesh V M Villa Jul 19 '18 at 18:46
0

For me it works perfect when I remove this line of code:

if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.