WordPress customizing wp_nav_menu into bootstrap collapsible tree menu

0
votes

I have a wordpress menu with a hierarchical structure and would like to customize it with the functionality of this bootstrap menu:

http://cssdeck.com/labs/twitter-bootstrap-plain-collapsible-tree-menu

The problem is they use a span around the headers, is there any way I can inject a span around certain elements of my wp_nav_menu?

Here's what I have accomplished so far, for the jquery I have changed it a bit for it to work a bit:

$('.tree-toggler a').click(function (e) {
    e.preventDefault();
    $(this).parent().children('ul.sub-menu').toggle(300);
});

I've added the tree-toggler class to my menu items but now obviously none of the links will work since I do a preventDefault(). But at least my menu can collapse now. YAY. Since I have no idea how to insert a label around my headers in the wp_nav_menu output, I guess I'll have to find a workaround with a's.

1
jqueryhtmlcsswordpresstwitter-bootstrap
yes there is a way, you have your answer, now go and try something and show us some code if you don't succeed - madalinivascu
@madalinivascu Could you point me in the right direction to find this way? - Frank Lucas
We can help you if only you can share what you have done. No one will write code for you. - Milap
@Milap I understand but the problem is I have no idea where to start. I don't have a gameplan since I am pretty new to wordpress. - Frank Lucas
Navigation Menus - user2917245

1 Answers

1
votes

yes there is. I've used bootstrap in most of my projects.

You need to use Bootstrap Nav Walker in order to achieve Bootstrap Menu in Wordpress.

More info here https://github.com/twittem/wp-bootstrap-navwalker

I'ts pretty simple to set up as explained on that page.