Combining WordPress Menus with the Bootstrap CSS Framework

When I design websites and develop custom themes for WordPress, I like to use Twitter Bootstrap as my CSS framework.  I combine the _s theme from the developers at WordPress with Bootstrap. That’s a whole other blog post.  The combination of the starter theme and the CSS framework as a starting point results in an efficient web design workflow.

It’s would be nice to be able to use the standard WordPress menu output from wp_nav_menu() in my header.  Here’s a bit of JavaScript that adds the Bootstrap CSS to WordPress menus:

(function ($) {
'use strict';

// make wp_nav_menu compatible with bootstrap dropdowns
$( “” ).addClass( “dropdown” );
$( “ > a”).addClass( “dropdown-toggle” );
$( “ > a”).attr(‘data-toggle’, ‘dropdown’);
$( “ul.sub-menu” ).addClass( “dropdown-menu” );
$( “ul.sub-menu” ).addClass( “dropdown-menu-left” );


Often when a page loads, Bootstrap sub-menus will flash on screen until the code catches up and hides them. To fix this annoying flash of dropdown menus, use the following CSS:

.sub-menu { display: none; }

That’s all you need to use WordPress menus with Twitter Bootstrap.