Build a Bootstrap WordPress Responsive Menu in 10 Minutes

written by William Patton on July 18, 2013 in WordPress Custom with 98 comments

This article has been updated to work with the latest Bootstrap 4. The code for Bootstrap 3 menus I’ve archived in a gist if you need it.

I love Bootstrap. It’s powerful, sleek and functional. It’s also responsive and that means using Bootstrap with WordPress Themes works perfect.

One of the things that is often lacking in themes built with Bootstrap is the ability to create the proper menu with support for all the features – like dropdowns, icons, dividers & headers.

The default menu functions that come in WordPress core are hard to make a proper Bootstrap navbar with. The BS navbar requires a specific placement of classes on different elements and it’s not easy to place them without extending the base Walker_Nav_Menu class to override some functions and add some extra ones to handle the new placement.

If you need a quick way use Bootstrap with WordPress in a theme you could always include Bootstrap from a CDN.

Using a Responsive Bootstrap Menu with WordPress

Add a WordPress Menu

The first thing you need to do is to ensure you have a WordPress menu location defined in the theme to place the menu at. If you are using one of your theme’s existing menus, or have already added a location, 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 for a 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.

 // this is the setup function.
function pwwp_mytheme_setup() {

    // the register_nav_menus call is what you should copy into your own
    // themes setup function.
    register_nav_menus(
        array(
            'footer_nav' => __( 'Footer Menu', 'mytheme' ), // example of adding a menu location
            'top_menu' => __( 'Top Menu', 'mytheme' ), // we will be using this top_menu location
        )
    );

}
// this will hook the setup function in after other setup actions.
add_action( 'after_setup_theme', 'pwwp_mytheme_setup' );

This code registers 2 theme menu locations – 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

The WordPress menu markup that’s generated by the default walker doesn’t work well to create Bootstrap Navbars. Bootstrap provides and dropdowns, headers and dividers that need wrappers and class placement that isn’t possible without a lot of filtering of the items.

The functions and walker that WordPress uses to build it’s menus and create a custom navwalker, just extend the built-in Walker_Nav_Menu class.

WordPress Menu Navwalker Classes

A navwalker is a set of functions and logic that is used to walk it’s way through a navigation of some kind based on a given input. With the default walker used for navs the way it walks through things isn’t quite right to create a Bootstrap Nav. To make it happen a custom navwalker class is used that extends, and overrides, 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 and you can ensure the specific placement of classes is done on the correct elements.

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

Bootstrap Responsive WordPress Menu Walker Class

The custom walker that we’re going to use can be found on Github. The original version was written by Ed McIntyre – Twittem. Since then myself and other developers have worked 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. The latest version is for Bootstrap 4 – with versions available in separate branches for Bootstrap 3 and Bootstrap 2.

Download WP Bootstrap Navwalker

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

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

If you place the file inside a folder – for example inside an /themename/inc/ folder then use inc/class-wp-bootstrap-navwalker.php as the file location.

Adding the Bootstrap Responsive Menu to your WordPress Theme

Now that we can run the 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 for the actual navigation.

<?php
wp_nav_menu( array(
    'theme_location' => 'top_menu',
    'depth'          => 2,
    'container'      => false,
    'menu_class'     => 'navbar-nav mr-auto',
    'fallback_cb'    => 'WP_Bootstrap_Navwalker::fallback',
    // 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.

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.

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.

<div id="main_navbar" class="navbar navbar-expand-md navbar-light bg-light">
    <!-- you can remove this container wrapper if you want things full width -->
    <div class="container">
        <a class="navbar-brand" href="#"><?php esc_html_e( bloginfo( 'name' ), 'themeslug' ); ?></a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerNav" aria-controls="headerNav" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'best-reloaded' ); ?>">
            <span class="navbar-toggler-icon"></span><span class="sr-only"><?php esc_html_e( 'Toggle Navigation', 'themeslug' ); ?></span>
        </button>
        <nav class="collapse navbar-collapse" id="headerNav" role="navigation" aria-label="Main Menu">
            <span class="sr-only"><?php esc_html_e( 'Main Menu', 'themeslug' ); ?></span>
            <?php
            wp_nav_menu( array(
                'theme_location' => 'bnav_topbar',
                'depth' => 2,
                'container' => false,
                'menu_class' => 'navbar-nav mr-auto',
                'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
                'walker' => new WP_Bootstrap_Navwalker(),
            ) );
        ?>
        </nav>
    </div>
</div>

Headers, Dividers and Menu Icons with Font-Awesome or Glyphicons

The navwalker class lets you use the extras that Bootstrap provides like icons, headers and dividers. These can be set in the menu editor by adding the appropriate class names to the CSS Classes for the item you want them applied to.

Supported link mods and class types are: .disabled, .dropdown-header, .dropdown-divider, .sr-only (can be used to create icon only menu items).

Final Product

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

tags: Bootstrap Bootstrap With Wordpress Bootstrap WordPress Cascading Style Sheets GitHub HTML element Menu Menu Icon Navigation bar Themes Menu Top Menu Twitter WordPress

---

Related Articles