Single Post

How to Integrate a Responsive WordPress Menu Using Bootstrap Nav Walker
- WordPress
- no responses
- 8 Views
- Jun 26, 2019
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.