1

Bootstrap 3 multi level dropdown menu not working on mobile devices. I checked many solution in StackOverflow. That solution for Desktop not for mobile. Below is the best solutions for multi lebel dropdown menu.

Bootstrap 3 dropdown sub menu missing

https://github.com/djokodonev/bootstrap-multilevel-dropdown

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

Above code is working well for desktop.

Live example: http://rahulmoral.com/portfolio/essanet/

Please view on mobile devices. Second level dropdown-menu will not work on mobile devices.

Community
  • 1
  • 1
Rahul
  • 2,011
  • 3
  • 18
  • 31

2 Answers2

1

It's actually working just fine. You need to scroll in order to see the expanded menu. However, to get it to work as you'd like, simply overwrite the max-height:

.navbar-collapse {
    max-height: none;
}
Serg Chernata
  • 12,280
  • 6
  • 32
  • 50
0

i got it to working by adding this to my css

@media screen and (max-width: 767px){
.navbar-fixed-top .navbar-collapse{
    max-height:100%;
} }

but instead of 100% you can also use none. i am using a fixed nav which is why i have navbar fixed top. u can change it to static or w.e. you are using.

Jurick Pastechi Genaro
  • 94
  • 12