rachelbaker/bootstrapwp-Twitter-Bootstrap-for-WordPress — Issue #14: Responsive sub-menus
Author: mindctrl
Created: 2012-02-14 14:59:11+00:00
State: open

When a dropdown exists in the menu, and it collapses to responsive view, the dropdowns don't function as expected in the Bootstrap documentation. They worked as normal dropdowns, which I kinda liked but ran into weird problems. I had this same issue on my theme.

I changed my jQuery related stuff to this, and I get the expected nested dropdowns as displayed in the Bootstrap docs and examples. As a bonus, if there's no menu assigned in Appearance > Menus, it rewrites the default wp_page_menu output so that it displays properly too.

Not sure if this will work with your theme as written, but it might be helpful.

```javascript
jQuery(document).ready(function(){
jQuery("ul.sub-menu").addClass("dropdown-menu").removeClass("sub-menu"); // switch sub-menu to dropdown-menu
jQuery("ul.children").addClass("dropdown-menu").removeClass("children"); // switch wp_page_menu children to dropdown-menu
jQuery("ul.dropdown-menu").parent().addClass("dropdown"); //add dropdown to top-level li.
jQuery("[id^=menu-] li.dropdown a").addClass("dropdown-toggle"); //add dropdown-toggle to top-level menu item
jQuery("ul.nav li.dropdown a").addClass("dropdown-toggle"); // add dropdown-toggle to wp_page_menu output
jQuery("ul.dropdown-menu li a").removeClass("dropdown-toggle"); //remove dropdown-toggle from dropdown menu items
jQuery('.dropdown-toggle').append(''); //add dropdown indicator/caret
});
```