Bootstrap 3 Hide the main menu when an item with a submenu clicks and displays a submenu

Question

I would like to have only a submenu displayed and hide the main menu after clicking an item in the main menu with a submenu. The tricky part is that it will only be activated on mobile devices, but not on the big screen. I tried only the plugin or implemented the library from under the link, and it had a conflict somewhere that the menu is not displayed. Hope you could give me a new way to do this.

http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/

My menu looks like this: displaying the main menu, and when you click an item from a submenu, it hides the main menu and shows ONLY the submenu.

<div class="navbar navbar-default "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- <a class="navbar-brand" href="#"> <img src="assets/img/vivaldi-logo.png" alt="" class="img-responsive" /> </a> --> </div> <div class="navbar-collapse collapse "> <ul class="nav navbar-nav dl-menu"> <li> <a href="index.html" class="home">HOME</a> </li> <li class="dropdown open"> <a id="whoweare" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="true">WHO WE ARE</a> <ul class="dropdown-menu"> <img src="assets/img/menutri.png" style="margin-top: -18px; margin-left: 20px;"> <li><a href="#">PATIENT FORMS</a></li> <!-- <li class="divider"></li> --> <li><a href="#">FREE CONSULTATION</a></li> <!-- <li class="divider"></li> --> <li><a href="#">INSURANCE</a></li> <!-- <li class="divider"></li> --> <li><a href="#">OUR STORY</a></li> <!-- <li class="divider"></li> --> <li><a href="#">PHYSICIANS</a></li> <!-- <li class="divider"></li> --> <li><a href="#">STAFF</a></li> <!-- <li class="divider"></li> --> <li><a href="#">TESTIMONIALS</a></li> <!-- <li class="divider"></li> --> <li><a href="#" style="border-bottom-width: 0px;">THE OSTEOPATHIC WAY</a></li> </ul> </li> <li> <a href="blog.html">SERVICES</a> </li> <li> <a href="contact.html">WELLNESS CENTER</a> </li> <li> <a href="contact.html">NEWS &#38; EVENTS</a> </li> <li> <a href="contact.html">CONTACT</a> </li> </ul> </div> </div> </div> 

Answer 1

Here is the simplest code

// for the screen for mobile devices

CSS

 @media(max-width:768px){ .dropdown-menu{ position: absolute; top: 0; bottom: 0; background-color: #ddd; min-height: 100%; } } 

JQuery

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { // for mobile users.. $('.dropdown').click(function(e){ e.preventDefault() $(this).siblings().addClass('hide'); $(this).find('a.dropdown-toggle').addClass('hide'); }) $('.navbar-toggle').click(function(e){ e.preventDefault(); $('.navbar-collapse').find('.hide').removeClass('hide'); }) } 

Here is the JSFIDDLE LInk JSFIDDLE to test mobile device usage. Chrome and in the developer console change the type of navigator and choose any mobile device