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

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.

• Part 1 – Loading Bootstrap & Font Awesome CSS & javascript
• Part 2 – Using Bootstrap dropdowns for your WordPress navigation
• Part 3 – Using Bootstrap to create a sticky footer
• Part 4 – Bootstrapped Layout: Pages, posts & sidebar
• Part 5 – Bootstrap search form & search results pages
• Part 6 – Bootstrap comments section

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 »

[adrotate group=”8″]

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