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>
  <!-- The WordPress Primary Menu -->
  <?php wp_nav_menu(
      'theme_location'    => 'main-menu',
      'menu_class'        => 'navbar-nav ml-auto w-100 justify-content-end',
      'container_class'  => 'collapse navbar-collapse',
      'container_id'    => 'navbarNav',
  ); ?>

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

Refer wp_nav_menu(); for more options.


Leave a Reply

Random Post Selection ::

Recent Posts

Unlock Unlimited Downloads