Site Overlay

Keep bootstrap nested dropdown menu open on mobile

Nested DropDown Menu

Bootstrap made the designing easy and websites seems flawless with interactive multi-level dropdown menus.

The challenging tasks for the web designers is to optimize and make the website more presentable on mobile devices too.Designers often face problems while handling menus in mobile devices because in most cases the menus doesn’t work fluently or open efficiently which affects the view of website.We are going to discuss the solution for this problem in this post.

While using nested dropdown menus which do not remain open in the mobile devices when you click on nested dropdown. Means you have submenus in dropdown menu. In mobile we have to click on the dropdown menu to see its nested dropdown. Normal it doesn’t remain open.

The following snippet will help you to keep the menu open

      $('.navbar-nav > .dropdown > .dropdown-menu > .dropdown').on('shown.bs.dropdown', function()
      {
        $(this).closest('.dropdown').parent().parent().addClass('open')
      });
      $('.navbar-nav > .dropdown > .dropdown-menu > .dropdown').on('hidden.bs.dropdown', function()
      {
        $(this).closest('.dropdown').parent().parent().addClass('open')
      });

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2022 Dip Codes. All Rights Reserved.