How to use Bootstrap Navbar in wordpress Nav Menu

Question

Here is my code.

<?php wp_nav_menu(array('theme_location => 'primary',)); ?>

How to format the code in my header.php using the bootstrap navbar? I am using bootstrap 4.3x. I am new to bootstrap and wordpress and I would appreciate any help..

Answer 1

So you've added the primary menu location

Then you can add the menu with something on the following lines (preferably in header.php):

<nav id="menu-bar" class="navbar navbar-fixed-top navbar-light w-100">
                <a id="" class="navbar-brand" href="#">  
                  </a>
                  <button style="display:block;" id="responsive_hamburger" class="hamburger navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="hamburger-box ">
                          <span class="hamburger-inner "></span>
                      </span>
                  </button>
                  <div class="collapse navbar-collapse float-right" id="navbar-content">
                          <?php $defaults=array(
                          'theme_location'    => 'primary',
                          'container_id'      => 'navbar-content',
                          'container'         => '',
                          'container_id'      => '',
                          'container_class'   => '',
                          'menu_id'           => false,
                          'menu_class'        => 'navbar-nav ml-auto',
                          'depth'             => 0,
                          'fallback_cb'       => 'class-wp-bootstrap-navwalker::fallback',
                          'walker'            => new wp_bootstrap_navwalker(),
                          'add_li_class'      => "nav-item mx-4"

                      );
                      wp_nav_menu($defaults);?>

                  </div>
                </nav>

The theme_location array attribute is adding this menu to the primary menu location.