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 freelance WordPress developer with over a decade of experience. I am passionate about making things and traveling the world.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!


Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Share With Friends

Email Stamp

Free Newsletter

Get my newest blog posts and insider tips. No more than a few emails a year.

Just enter your email address below and click Sign Up Now

Please enter all required fields
Correct invalid entries

You have Successfully Subscribed!