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>
Written by Dwight Scott
Related protips
4 Responses
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Php
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#