Responsive Multi level Drop Down Menu Bootstrap 3 – UPDATED

As you are aware support for multi level drop down menu was removed in Bootstrap 3. I previously posted a tutorial and the necessary code to allow you to support multi-level menus in WordPress using Bootstrap. However, in my rush to get the post up, apparently I made a few errors in the code and CSS.

Since the changes I made were rather significant I have just uploaded the new files to my Github. You can check it out there: https://github.com/jeffmould/multi-level-bootstrap-menu.

To see the menu in action you can go to http://theboot.fenwickmedia.com for a demo.

Follow me

Jeff Mould

Social Impact Entrepreneur at Haphire, Inc.
Born in Maryland, lives in Delaware, Starbucks addict, student, entrepreneur, and information technology professional. Jeff has been passionate about computers, technology, and the Internet since before he can remember. He blogs about programming and technology in general. Read more about Jeff Mould or follow him on Twitter.
Follow me

Latest posts by Jeff Mould (see all)

  • Pingback: Responsive Multi level Drop Down Menu Bootstrap 3 » Jeff Mould()

  • http://www.mobileappaddict.com/ John Defahl

    Thank you for taking the time to do this. I am going to try and deploy this with the Drupal Bootstrap 3 theme. If you don’t hear back from me, then it went smooth! Curious how the Drupal Bootstrap theme’s menuing engine will work with this.

  • Nick

    It works, but it works with a mouseover so it won’t work very well on mobile devices. You should change the mouseover events to clicks, that would work a bit better I think.

  • Rose

    Thank you very much.

  • http://www.yourbusybee.com Laura

    Hi there,
    Thank you SO very much for this. I’ve been toiling away trying to figure out how to get the new bootstrap to display down to the grandchild level. Well, it was displaying, but it was all wonky. In any case, the issue I’m having is that with parent menu items that have a child and/or grandchild, the first two levels are not clickable. I’m not sure what the deal is. I did find in the walker where it had an attr of ‘#’, and I tried to replace that with ! empty( $item->url ) ? $item->url : ”; but I’m a hack and don’t really know what that does or why. It does, however, seem to at least show that the link *should* go to the correct page. But again, clicking does nothing. I’m a little flummoxed here. One other issue, and I’m sure it’s CSS and I just haven’t gotten around to it yet: The 3rd level pops out at the same time as the 2nd. I’d prefer for it to come out on click or on hover. Is that possible?

  • Alcom

    Hi

    I’ve observed that your nav doesn’t work appropriately on mobile devices, as on Iphone: the second level in partucular.

    Thanks anyway for your great work.

  • Pingback: Responsive Multi level Drop Down Menu Bootstrap 3 — UPDATED — Jeff Mould | Pilat66 blog()

  • Pingback: JavaScript — Responsive Multi level Drop Down Menu Bootstrap 3 — UPDATED — Jeff Mould | Pilat66 blog()