How to insert Bootstrap 4 menu in WordPress?

Question

I'm trying to setup a Bootstrap 4 navbar menu but I can't get it to work the way I wanted.

The new Bootstrap 4 navbar menu code looks like this.

<nav class="navbar navbar-expand-lg navbar-dark bg-success">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav mr-auto">
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#our-company">Our Company</a>
    <a class="nav-item nav-link" href="#our-products">Products</a>
  </div>
  <div class="navbar-nav">
    <a class="nav-item nav-link" href="#"><i class="fa fa-envelope mr-2"></i>[email protected]</a>
    <a class="nav-item nav-link" href="#"><i class="fa fa-phone mr-2"></i>[phone]</a>
  </div>
</div>
</nav>

Note, the nav-items are enclosed by a div with a class of navbar-nav which is also enclosed with a parent div with class of collapse navbar-collapse. It's outermost parent div is nav with a class of navbar.

The WordPress way of displaying the menu on the other hand looks like this.

<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11">
      <a href="#">Home</a>
    </li>
    <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12">
      <a href="#our-company">Our Company</a>
    </li>
    <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13">
      <a href="#our-products">Our Products</a>
    </li>
  </ul>
</div>

WordPress does the menu using ul and li. Whereas Bootstrap does it via divs and anchor tags.

My WordPress way of coding the menu looks like this below:

<?php
  wp_nav_menu([
    'theme_location'  => 'primary',
    'container'       => 'div',
    'container_id'    => '',
    'container_class' => 'collapse navbar-collapse',
    'menu_class'      => 'navbar-nav mr-auto',
  ]);
?>

Now, when the menu gets generated, it looked like this on the site.

<div class="navbar-nav mr-auto">
  <ul>
    <li class="page_item page-item-7 current_page_item">
      <a href="http://localhost/envirodyn/" aria-current="page">Home</a>
    </li>
  </ul>
</div>

If that is how WordPress does it, then at least I wanted to be able to add a class .navbar-nav to the ul, .nav-item to the li tag, .nav-link to the anchor tag.

That way, it would look like this

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Menu 2</a>
  </li>
</ul>

Answer 1

You can integrate bootstrap navbar with wordpress by using wp bootstrap navwalker class. You can find the class from google search.

Answer 2

Sarwar Alam's suggestion worked for me! I will put the detailed answer to my question here just in case others will experience the same scenario as mine.

1 Upvote for Sarwar's answer though.

As per his suggestion, I searched google and found the answer from this link: https://techsolutionshere.com/implementing-bootstrap-navwalker-in-wordpress/

1. I downloaded the class-wp-bootstrap-navwalker.php file from the GitHub link provided.

2. Placed the file in my theme's root directory.

3. I added the code below inside my functions.php file.

if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // file does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // file exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

3. Made sure that the nav_menus is registered (in functions.php file).

4. Then inserted the wp_nav_menu code into the area where I wanted to put my navbar menu on the site.

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

5. Went to Appearance >> Menus and then checked the Display Location I want under Menu Settings.

Viola! Now my Bootstrap 4 navbar menu is working the WordPress way!