Last Updated: February 25, 2016
·
16.83K
· dscotts3

Bootstrap collapse menu with WordPress menu

Quick easy way to use WordPress' custom menus with bootstrap

<?php
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' ) 
);
?>

<script>
    $(document).ready(function(){
        $("ul.sub-menu").parent().addClass("dropdown");
        $("ul.sub-menu").addClass("dropdown-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');
    });
</script>

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.

https://github.com/twittem/wp-bootstrap-navwalker

over 1 year ago ·

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

over 1 year ago ·