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
$( “li.menu-item-has-children” ).addClass( “dropdown” );
$( “li.menu-item-has-children > a”).addClass( “dropdown-toggle” );
$( “li.menu-item-has-children > a”).attr(‘data-toggle’, ‘dropdown’);
$( “ul.sub-menu” ).addClass( “dropdown-menu” );
$( “ul.sub-menu” ).addClass( “dropdown-menu-left” );
})(jQuery);
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.