Bootstrap navbar as your Wordpress menu

Do you want to use the bootstrap navbar as a menu in Wordpress? No problems. It takes just a few seconds to config.

What we want to achieve is to use the bootstrap navbar. No plugin is required but we need to download the helper file to achieve this. That one is called wp-bootstrap-navwalker - "A custom Wordpress walker to implement the Twitter Bootstrap dropdown navigation using the Wordpress built in menu manager." That can be found here and the direct download location of the navbar here. Just note that this is for bootstrap 3.0+ and if you have the legacy version (2.3.2) then you need another version of the helper.

Include the file from your functions.php-file. The file should be placed somewhere in your theme-folder.

require_once('wp_bootstrap_navwalker.php');

Then you need to update your wp_nav_menu() in your theme.

    wp_nav_menu( array(
        'menu'              => 'primary',
        'theme_location'    => 'primary',
        'depth'             => 2,
        '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())
    );

"primary" is the name of your menu that you have probably already defined somewhere in your functions.php-file but if you don't have done that this is how you could do it:

register_nav_menus( array(    'primary' => __( 'Primary menu', 'yourthemename' ),) );

That's it. But you may need to put some surrounding code to get the appearance you look for. It could be something like this in the source of your theme-file:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"><nav>    <div class="container">        <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="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>        </div>
        <?php            wp_nav_menu( array(                'menu'              => 'primary',                'theme_location'    => 'primary',                'depth'             => 2,                '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></nav></div>

Heads up! This menu does only support 2-level of depths. Check out the links above to learn more about the navbar.