Trouble on Bootstrap mobile menu, how to overcome?

Question

css

There is a project made on Bootstrap, menu items were switched on click, the client wanted the items to work on hover, and when clicked, a transition to the page was made.

I put the following code for the bootstrap menu to work on hover:

.dropdown:hover > .dropdown-menu {
  display: block;
  }
  .dropdown:hover > .dropdown-menu > li > a {
  position: relative;
  z-index: 1000;
  }

now the menu works both on hover and on a click, but on mobile extensions a jamb pops up when clicked
and only the second time the menu is shown correctly

how to solve this trouble on mobile so that the menu opens correctly?

Answer 1

@media (max-width: 767px)
.navbar-nav .open .dropdown-menu {
    display: block !important;
}

@media (max-width: 767px) {
.dropdown:hover > .dropdown-menu {
    display: none;
}
}

In general, you need to hide that drop-down list at resolutions less than 767px, then there will be no duplication and will work correctly.