X

Create a Responsive WordPress Menu Using Bootstrap Nav Walker

Speed up your theme development performance, starting with a responsive navigation menu using the one-and-only Bootstrap.

Step-1: Download “wp_bootstrap_navwalker.php”

https://github.com/twittem/wp-bootstrap-navwalker/blob/master/wp_bootstrap_navwalker.php

Step-2: Upload it with your wp-content/themes/YOURTHEME/

Step-3: Add below SNIPPET-1 code within function.php

Step-4: Create bootstrap Menu goto header.php & add SNIPPET-2. Replace ‘menu’ with your menu name

Code Snippet:

<?php

/*	SNIPPET-1 	*/
// Register Custom Navigation Walker for function.php
require_once('wp_bootstrap_navwalker.php');



/*	SNIPPET-2 	*/
// 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 -->


?>

Comments  Leave a Reply

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!