Creating a Bootstrap WordPress Theme (Part 2) – Navigation Menu

Bootstrap WordPress Theme - Loading CSS & Javascript

In this tutorial, we walk you through modifying WordPress’ default wp_nav_menu to use Bootstrap’s dropdown menus.

This is part 2 in the How to Create a Bootstrap WordPress Theme series.

SEE ALSO: Our updated list of WordPress Bootstrap Themes

Bootstrap Navigation Menu

First thing we do in our functions.php file is register the menus that we’re using in our theme. We’re just registering one menu for now.

function twbs_register_menus() {
	register_nav_menu('primary-nav', __( 'Primary navigation at top of page.' ));
}
add_action( 'init', 'twbs_register_menus' );

And now we open up header.php, and insert the menu into our theme.

<?php wp_nav_menu(
	array (
		'theme_location' => 'primary-nav',
		'menu_class' => 'nav navbar-nav',
		'depth' => 2,
		'container' => '',
		'walker' => new Bootstrap_Walker_Nav_Menu()
	)
); ?>

The last parameter, walker, is important. We explain it below.

Extending Walker_Nav_Menu for Dropdowns

We need to do some extra work to the default wp_nav_menu() to account for child pages & make the Bootstrap dropdowns work. John Megahan wrote a great script that does just that.

His code adds the appropriate classes & data-attributes to activate the javascript for the dropdown menus, as well as pull in the styling.

View his code on github »

ThemeIsle WordPress Themes

CSS for Fixed Navbar

If you go with a fixed navbar, you’ll need to bump all content down so it doesn’t get hidden behind the navbar.

/* Create space at top of page for navbar */
#wrap > .container {
	padding: 60px 15px 0;
}

Caveat

Using this method results in the top-level navigation links (of the dropdowns) NOT linking to any page. Clicking them will only open the dropdown menu.

Dropdowns on Hover

This simple jQuery code will make Bootstrap nav menus open on hover. You can place this code in a custom javascript file, or add it directly to a theme file (separate file is recommended). Be sure it resides inside of a $(document).ready() function, and is loaded after your main jQuery file loads.

$(document).ready(function() {

	// Bootstrap menus open on hover
	$('ul.nav li.dropdown').hover(function() {
		$('.dropdown-menu', this).fadeIn();
	}, function() {
		$('.dropdown-menu', this).fadeOut('fast');
	}); // hover

});

(Thanks Jitendra, user-submitted comment)

Future Improvements

I’m hoping there’s an option to make those top-level links actually navigate to a page, instead of just opening a dropdown. The reality is that many users will try to click those top-level links, and they will expect them to take them to another page.

If anyone knows how to extend John Megahan’s gist further, and has the time/desire to do so, please let us know in the comments.

Next up: Part 3 – Using Bootstrap to create a sticky footer

4 Commentson "Creating a Bootstrap WordPress Theme (Part 2) – Navigation Menu"

  1. /

    You can open the menu on hover using simple jQuery code. Here is the code.
    // make menus drop down automatically
    $(‘ul.nav li.dropdown’).hover(function() {
    $(‘.dropdown-menu’, this).fadeIn();

    }, function() {

    $(‘.dropdown-menu’, this).fadeOut(‘fast’);
    }); //hover

    → Reply
    1. (Author) /

      Thanks Jitendra. Worked like a charm. I’ve added this to the end of the post, as well.

  2. /

    Fix for the parent of dropdowns getting reset to “href=#”.

    In wp_bootstrap_navwalker.php around line 92:
    change $atts['href'] = "#"; to $atts['href'] = $item->url;

    → Reply
    1. (Author) /

      Thanks for the fix, Mark.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.