Build a Bootstrap WordPress Responsive Menu in 10 Minutes

written by William Patton on June 18, 2013 in WordPress Custom with 94 comments

bootstrap wordpress responsive menu walker iconsI love Bootstrap. It’s powerful, sleek and functional. It’s also responsive and that means Bootstrap with WordPress works perfect.One of the things that is often lacking is the ability to actually create the proper Bootstrap menu – with dropdowns, icons, dividers & headers.

Making a proper Bootstrap WordPress responsive menu is a problem because it requires a custom navwalker class. The navwalker class is something that the average user, and even some developers, don’t have much experience with. It’s because what’s built into WordPress already works great – it’s just not so good at handling the sheer amount of additional markup that it takes to make certain Bootstrap menus work.

If you need a quick way use Bootstrap with WordPress you could always include Bootstrap from a CDN. Let’s get to building this responsive Bootstrap menu with WordPress.

Bootstrap WordPress Responsive Menu Downloads

If you’re following along with the code in the post then you’ll need to grab the Navwalker from github.

Estimated time to complete = 10 minutes.

Bootstrap Navwalker

Or you could give my Bootstrap 4 Theme a try. The walker is inlcuded there already if you wanted an example. The dev version is available on github and you can download he theme directly from the theme directory

WordPress Bootstrap 4 Theme – Best Reloaded

Add a WordPress Menu

The first thing you need to do is to add a WordPress menu. If you’ve already done this, or are using one of your theme’s existing menus, then skip to the next section.

Find your theme’s setup function (usually inside the functions.php file) and add the register_nav_menus(); function your new menu. If you can’t find a setup function in your theme that’s ok, just create one that’s the same as the following.

You could also add this to a custom functionality plugin if you would rather but it’s probably best to keep theme components inside the theme files.

function pwwp_mytheme_setup() {

'footer_nav' => __( 'Footer Menu', 'bootpress' ),
'top_menu' => __( 'Top Menu', 'bootpress' )

add_action( 'after_setup_theme', 'mytheme_setup' );

This code registers 2 theme menu spots, the footer_nav and the top_menu. We will only be using one of these – top_menu– to create our Bootstrap WordPress responsive menu but you could add as many custom menus here as you want.

Using Bootstrap with WordPress wp_nav_menu() Function

WordPress default menu markup doesn’t work to create Bootstrap Navbars. You have to make serious adjustments by passing a bunch of parameters to the wp_nav_menu() function to override the default behavior and add custom wrappers with Bootstrap mark-up. Even then it still doesn’t have the full responsive functions or the ability to add the extras that Bootstrap provides, like icons or dropdowns.

To get past the limits of what Bootstrap with WordPress default menus can do you need to use a custom navwalker, which extends the built-in Walker_Nav_Menu class.

WordPress Menu Navwalker Classes

What a custom navwalker class does is extend, and override, how the menu input gets handled and how the output is created. Within a custom navwalker you have complete control over how the menu behaves.

With a custom walker you can build a true responsive Bootstrap Nav in WordPress themes using the built-in menu editor.

Bootstrap Responsive WordPress Menu Walker Class

The custom walker that we’re going to use can be found on Github. It was originally written by Twittem, he is no longer with the project. I have been working with other developers to keep it updated and provide support and maintenance for users.

The walker class is the most complicated code involved in this tutorial. Since it’s already written and can be used as-is I won’t go into detail about that code. Just download it and include it in your theme. The latest stable version is for Bootstrap 3 but a Bootstrap 4 branch is available and a Bootstrap 2 branch is there too if you need it.

Download Bootstrap Navwalker

Including it in your theme is easy, just copy the wp-bootstrap-navwalker.php file into your theme then add the following line to your functions.php file.

// Register Custom Navigation Walker
require_once 'wp-bootstrap-navwalker.php';

Adding the Bootstrap Responsive Menu to your WordPress Theme

Now that we can run the custom menu through the Bootstrap navwalker all we have to do is add it to the pages.Adding it to the page is just a case of calling the wp_nav_menu() function with a handful of parameters, the walker class will handle all of the output.

The following code works with BS2 and BS3. If your using it with Bootstrap 2 you can remove the navbar-nav class.

wp_nav_menu( array(
'menu' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_page_menu',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker(),

I want my menu to go in a navbar at the top of the pages but using similar code to create all kinds of bootstrap menus wherever you want. You can replace the navbar-nav with nav-pills or nav-tabs to make the kind of menu you want. You would probably want to add nav-justified too to center the items in the menu if you were not making a responsive navbar.

I’ll be placing the code to create my menu in the header.php file so I can make it a top menu. If you want to have it in a different place then just paste this code in wherever you want it to appear.

Get A Plugin to Split Test Your Content like a Pro!

To make a responsive navabar you need to wrap the above code in some more mark-up. The block of code below is the responsive navbar code from the Bootstrap Docs with the Bootstrap Navwalker code included in the right place. It’s ready to paste right into your theme – but remember to change the menu parameter to the name you gave your menu when you registered it.

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
    <a class="navbar-brand" href="#">SITE TITLE</a>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        wp_nav_menu( array(
            'menu' => 'top_menu',
            'depth' => 2,
            'container' => false,
            'menu_class' => 'nav navbar-nav',
            'fallback_cb' => 'wp_page_menu',
            //Process nav menu using our custom nav walker
            'walker' => new wp_bootstrap_navwalker())
    </div><!-- /.navbar-collapse --> 

Headers, Dividers and Menu Icons with Glyphicons

The navwalker class lets you use the extras that Bootstrap provides like Glyphicons, headers and dividers. These can be set in the menu by adding the appropriate class names to the Navigation Label or Title Attribute box when you create your menu items and it will add the necessary tags.

Add the glyphicon class name to the Title Attribute box to add an icon to the menu item. To make a divider you do it by adding a custom link with the href value of ‘#’ and the name of divider.

For a header do the same but give it the name of header and place the text you want to appear in the Title Attribute box.

If you want to swap out Glyphicons for Font Awesome that’s a pretty simple process and to use them with the navwalker you just need to include the correct class names in the boxes after you include Font Awesome on your site.

Bootstrap Icons with WordPress Menu Items

You can use any of the icons that are available in Bootstrap.

Using Headers and Dividers In The Menu

Got Questions? Ask Them Now

Do you have any questions about using Bootstrap with WordPress, what this navwalker does or something else entirely? You can use the comments form to ask your question or you could click the button below to get a form to send me an email.

Get Answers

Final Product

The final product, once you’ve added some items and set the icons, looks something like this.