Are you looking for a way to start with a responsive navigation menu using Bootstrap?

While there’s probably a plugin for this, we have created a quick code snippet that you can use to completely create a responsive WordPress menu using Bootstrap Nav Walker in WordPress.

Instructions:

First you need to download the wp_bootstrap_navwalker.php file from here

Open your WordPress themes functions.php file /wp-content/your-theme/functions.php and add the following code:

// Register Custom Navigation Walker for function.php
require_once('wp_bootstrap_navwalker.php');

You will also want to declare your new menu in your functions.php file.

register_nav_menus( array(
  'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

Next, you need to create a Bootstrap menu and and add the following code to the header.php file of your theme.

// Create navigation
<div class="navbar " role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
     
            <div class="navbar-collapse collapse ">
                <?php  /* menu */
                    wp_nav_menu( array(
                                'menu'              => 'primary-menu',
                                'theme_location'    => 'primary-menu',
                                'depth'             => 5,
                                'container'         => 'div',
                                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse ',
                                'menu_class'        => 'nav navbar-nav  ',
                                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                                'walker'            => new wp_bootstrap_navwalker())
                    ); 
                 ?>
            </div>
        </div><!-- Navigation -->
 
 
?>

Make sure to replace the ‘menu’ parameter with the name of your Bootstrap menu.