1

I have created a menu in Bootstrap 4:

Here is the 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>
                </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>
              </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>

It's working fine for me, It's parent menu items are togellable (not clickable) and parent menu has arrow icon too.

enter image description here

But I have tried to implement same menu in WordPress by this code:

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

Here is the output code: https://pastebin.com/qBdibxWY

Output: enter image description here

Parent menu doesn't have arrow icon and it is acting in :hover (not togellable). How can I make my WP Menu like My Bootstrap Menu?

| improve this question | | | | |

Your Answer

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

Browse other questions tagged or ask your own question.