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?

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.