Latest NewsBlog Detail

Single Post

Bootstrap Nav Walker

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' ),
) );

 

Bootstrap Nav Walker

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.

 

 

Tags
Sarker Allex
Sarker Allex

Co-Founder & Director at Prokash IT

Provesh is Co-Founder and Director at Proveshit. He is responsible for managing, growing open source technologies team and has spearheaded more than 250 projects in Salesforce CRM alone. He provides consulting and advisory to clients looking for services relating to CRM(Customer Relationship Management) and ECM(Enterprise Content Management). In the past, Pratyush has held consulting roles with various global technology leaders, such as Globallogic & HCL in Bangladesh. He holds an Engineering graduate degree from Bangladesh Institute of Technology, Roorkee.