CSS Hoverable Dropdown Menu Doesn't Close on Mobile

Bootstrap dropdown in mobile menu not closing on click

i have found an alternate solution for this, i used javascript to check even and odd clicks on the button and changed the style of the submenu accordingly, below is the code:

function myFunction() {
  let even = 'block';
  let odd = 'none';
  let elements = document.getElementsByClassName("dropdown-menu")

  Array.prototype.forEach.call(elements, function(element) {
    element.style.display === even ? element.style.display = odd : element.style.display = even
  });
}

<a class="nav-link" href="#" id="shop_submenu" onclick="myFunction()" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="true">
                        Rent
                      </a>

Dropdown menu doesn't work on mobile

Hover doesn't play nice on mobile. You could try adding a click listener with a toggleClass() event for mobile and leave the conventional hover on desktop:

• Add .display class to your CSS with display: block;
• Attach .on("click") listener with toggleClass("display"); on ul only if viewport width is equal or below 414px (feel free to adjust viewport width value to your benefit).

EDIT (comment based):

• Set :hover through @media query only for desktop, and left click listener for mobile via jQuery.

Test it resizing viewport here. First resize it, then run the code and try to either hover or click.(UPDATED)

var viewport = $(window).width();if (viewport <= 414) {  jQuery('.acc-menu').on("click", function() {    jQuery('ul').toggleClass("display");  });}

.acc-menu {  margin-top: -6px;  padding: 0;  list-style: none;}.parent span {  letter-spacing: 3px;}.acc-menu li {  float: left;  display: block;  background: #fff;  position: relative;  z-index: 500;  margin: 0 1px;}.acc-menu li a {  display: block;  line-height: 18px;  color: #333;  text-align: left;}.acc-menu ul {  position: absolute;  left: -14px;  display: none;  margin: 0 0 0 -1px;  padding: 0;  list-style: none;  text-indent: 10px;}.acc-menu ul.display {  display: block;}.acc-menu ul li {  width: 150px;  float: left;}.acc-menu ul a {  display: block;  padding: 8px 5px;}.acc-menu ul a:hover {  text-decoration: underline;}@media (min-width: 415px) {    .acc-menu li:hover ul {        display: block;    }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><ul class="acc-menu">  <li class="parent">    <a href="#"><span>Account</span></a>    <ul>      <li class=""><a href="#">Link 1</a>      </li>      <li class=""><a href="#">Link 2</a>      </li>      <li class=""><a href="#">Link 3</a>      </li>      <li class=""><a href="#">Link 4</a>      </li>      <li class=""><a href="#">Link 5</a>      </li>    </ul>  </li></ul>

Covert responsive dropdown menu from hover only to hover/click

You can do that with some jQuery:

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }

  $(".dropbtn").click(function() {
    $(this).parent().find(".dropdown-content").toggleClass("open");
  });
}

body {
  margin: 0;
  font-family: Arial
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .dropdown-content {
    display: none !important;
  }
  .dropdown-content.open {
    display: block !important;
  }
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Concept 
        <i class="fa fa-caret-down"></i>
      </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav with Dropdown</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

---

Related Topics