Build a Bootstrap WordPress Responsive Menu in 10 Minutes

written by William Patton on June 18, 2013 in WordPress Custom with 88 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

So you can get started quickly I’ve prepared a set of files you can download that includes all the code from this post so you can copy/paste it directly into your theme.

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.

Quick Start Pack

Bootstrap Navwalker

Or you could give my Bootstrap Theme a try.

Bootstrap Theme

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 mytheme_setup() {

register_nav_menus(
array(
'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.

To get past the limits of what Bootstrap with WordPress default menus can do when you make the adjustments like that. To have a true Bootstrap menu you need to have a custom walker.

WordPress Menu Navwalker Classes

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

To create a custom navwalker you have to extend the navwalker class.

Bootstrap Responsive WordPress Menu Walker Class

I don’t have to go into details about how to create a Bootstrap navwalker class and extend the existing class – because Twittem created one that works great and uploaded it to Github. Just download it and include it in your theme – it has been updated to work with Bootstrap 3 but a Bootstrap 2 branch is available.

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 following code works with BS2 and BS3. If your using it with Bootstrap 2 you can remove the navbar-nav class.

<?php
wp_nav_menu( array(
'theme_location' => '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 theme_location 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>
        </button>
    <a class="navbar-brand" href="#">SITE TITLE</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <?php
        wp_nav_menu( array(
            'theme_location' => '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 --> 
</nav>

Headers, Dividers and Menu Icons with Glyphicons

The navwalker class lets you use the extras that Bootstrap provides like Glyphicons 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.