CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
Rahul
Rahul

Reputation: 2071

Bootstrap 3 multi level dropdown menu not working in mobile

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.

Upvotes: 1

Views: 4187

Answers (2)

Jurick Pastechi Genaro
Jurick Pastechi Genaro

Reputation: 94

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.

Upvotes: 0

Serg Chernata
Serg Chernata

Reputation: 12400

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;
}

Upvotes: 1

Related Questions