Read ahead:

WordPress Theme menu

WP? NAV? Menu

The class name (default sub menu) of the secondary menu cannot be modified when the menu display item is set using WP > NAV > menu. In this case, you can use Walker to set.

In fact, the WP? NAV? Menu() function calls an object provided by the core, namely "walker? NAV? Menu".

Here, a new class is written, such as WP ﹣ bootstrap ﹣ navwalker(), which inherits "Walker ﹣ NAV ﹣ menu" and rewrites it. In order to construct a suitable multi-level menu.

This object is called by code: 'walker' = > New WP ﹣ bootstrap ﹣ navwalker(). To modify the class name of the secondary menu.

Case, the original code is as follows (wordpress code has not been called yet):

  <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
      <div class="container">
        <a class="navbar-brand" href="#">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

The implementation steps are as follows:

Step 1: Preparation Class:

The following classes are found in the topic that we always support bootstrap,

File name: class WP bootstrap navwalker.php

Class: understrap? WP? Bootstrap? Navwalker ()

class Understrap_WP_Bootstrap_Navwalker extends Walker_Nav_Menu

Other sources:

https://github.com/wp-bootstrap/wp-bootstrap-navwalker

Step 2: import the bootstrap menu style in functions.php

include_once('inc/wp_bootstrap_navwalker.php');

Step 3: display

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<?php

wp_nav_menu(
array(
'theme_location' => 'menu-1',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 2,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
);

?>	
</div>
</nav>

Corresponding HTML

<!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
        <div class="container">
            <a class="navbar-brand" href="#">Start Bootstrap</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <!-- The WordPress Menu goes here -->
            <div id="navbarNavDropdown" class="collapse navbar-collapse">
                <ul id="main-menu" class="navbar-nav ml-auto">
                    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1121" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1121 nav-item"><a title="Home" href="#" class="nav-link">Home</a></li>
                    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1122" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1122 nav-item"><a title="About" href="#" class="nav-link">About</a></li>
　　　　　　　　　　　　　　　　<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-1122" role="menu">
　　　　　　　　　　　　　　　　　　<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1125" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1125 nav-item"><a title="sub-about" href="#" class="dropdown-item">sub-about</a></li>
　　　　　　　　　　　　　　　　</ul>

                    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1123" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1123 nav-item"><a title="Services" href="#" class="nav-link">Services</a></li>

                    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1124" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1124 nav-item"><a title="Contact" href="#" class="nav-link">Contact</a></li>
                </ul>
            </div>    
        </div>
    </nav>

Note: redundant classes and ID s are added automatically by the program. Redundant class names of menus can be removed or retained. Refer to the relevant document "removing or retaining redundant class names of menus".