Using WordPress Menu As Bootstrap 4 Navbar

This tutorial will help you use a WordPress menu with the Navbar component of Bootstrap 3 and Bootstrap 4. Please refer this guide for how to do it directly with Bootstrap.

Here is the code to use WordPress navigational menu as the Navbar component.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <!-- The WordPress Primary Menu -->
  <?php wp_nav_menu(
    array(
      'theme_location'    => 'main-menu',
      'menu_class'        => 'navbar-nav ml-auto w-100 justify-content-end',
      'container_class'  => 'collapse navbar-collapse',
      'container_id'    => 'navbarNav',
    )
  ); ?>
</nav>

Where main-menu is the location used while registering the navigational menu. Refer register_nav_menus( $locations );

Refer wp_nav_menu(); for more options.

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.