Using Bootstrap 4 and jQuery 2.2.4, I've created a navbar with three layers of menus, comprising two levels of drop-downs from the top-most level.
Everything works smoothly except for a glitch on mobile devices. The menu collapses to the hamburger icon properly and reveals the menu/sub-menus when clicked. However, an issue arises when attempting to navigate through the sub-menu items; they retract as the mouse moves down, making it impossible to select any items below that level. On actual mobile devices where there is no mouse input, touching the sub-items does not yield any response.
This problem specifically affects the first level of sub-menu items related to "Smart Phone," while the second level items under "Computer" function correctly. This unusual behavior occurs regardless of whether the sub-menu pertains to Smart Phones or Computers.
A video has been created to illustrate this issue further (https://drive.google.com/open?id=1X_3kY-PBEgLra_mhvpZwPRsQMxd2-SRD).
I believe this issue may be an easy fix for those experienced in the matter. Any guidance on rectifying my mistakes would be greatly appreciated :)
To provide context, here's the related code...
- CSS
/*=========================== Navigation ============================ */
.navbar {
background-color: #fff;
box-shadow: 1px 5px 10px rgba(49, 49, 49, 0.21);
}
.navbar-nav a {
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 16.5px;
letter-spacing: 0.5px;
line-height: 25px;
}
.navbar-nav a {
color: #404044;
}
...
...
/* navbar brand */
.nav-brand {
line-height: 20px;
margin-top: 0px;
}
.nav-brand img {
max-height: 60px;
}
.navbar-brand i {
vertical-align: sub;
margin-right: 10px;
font-size: 45px;
}
...
...
- HTML
<div id="navbarContent" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a id="dropdownMenu1" href="#" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="nav-link dropdown-toggle">Products
</a>
<ul aria-labelledby="dropdownMenu1" class="dropdown-menu border-0 shadow">
<li><a class="dropdown-item" href="/phonecase">Phone Case</a></li>
...
...
</ul>
</li>
...
...
</ul>
</div>
Your assistance in resolving this matter is highly appreciated!