Last Updated: February 25, 2016
· dscotts3

Bootstrap collapse menu with WordPress menu

Quick easy way to use WordPress' custom menus with bootstrap

wp_nav_menu( array( 
'menu'              => 'main-menu', 
'container_class'   => 'navbar-content nav-collapse collapse', 
'menu_class'        => 'nav nav-tabs pull-right', 
'menu_id'           => 'main-menu' ) 

        $("ul#main-menu li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $('.navbar .dropdown-toggle').append('<b class="caret"></b>');
        $('a.dropdown-toggle').attr('data-toggle', 'dropdown');

4 Responses
Add your response

Interesting solution. I wonder what the performance is like on larger sites versus a walker class.

over 1 year ago ·

Thanks! Not sure - I'd be interested in it's performance on larger sites too.

over 1 year ago ·

If your use bootstrap a lot with WordPress I made a custom walker class to implement all of the bootstrap menu functions including dividers and glyphicons with the wordpress menu editor.

over 1 year ago ·

Very cool! I'll have to try this on my next project.

over 1 year ago ·