CSS navbar dropdown menu works well on everything except android.
I checked my navbar on PC desktop, MacBook, iPhone, iPad. The hamburger dropdown menu worked fine.
I checked android and it did not work. The menu simply disappears if I touch the one drop-down item. If I hold it down for a few seconds it sort of works, but that isn’t ideal.
Is there a media query that could isolate the android? I could then simplify the menu, specifically for that device. The media queries I know of only relate to screen width, which is too general.
Test page: www(dot)atnuke(dot)com/nav(dot)html
This is the relevant code with media query:
.navbar {
display:flex;
position: fixed;
overflow: visible;
background-color: #27254F;
top: 0;
min-height: 70px;
justify-content: space-between;
align-items: center;
padding: 0 24px;
width: 100%;
border-bottom: 2px solid #BEDEFA;
}
.nav-menu {
display:flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-menu li:hover>.sub-menu{
top: 4rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover>.sub-menu{
top: 0rem;
left: 8rem;
}
.nav-link{
transition: 0.7s ease;
font-size: 1.2rem;
}
.nav-link:hover{
color: dodgerblue;
}
.sub-menu {
line-height: 2rem;
width: max-content;
padding-left: 5px;
padding-right: 5px;
display: block;
position: absolute;
border-top: 3px solid #145DDD;
background-color: #191919;
transition: all 650ms ease;
top: 4rem;
visibility: hidden;
z-index: 1000;
opacity: 0;
}
.sub-menu::before {
content: "";
position: absolute;
top: -1.5rem;
left: 2rem;
border: 0.6rem solid transparent;
border-bottom-color: cornflowerblue;
}
.sub-menu .sub-menu::before {
top: 0rem;
left: -1.5rem;
border: 0.6rem solid transparent;
border-right-color: cornflowerblue;
}
.sub-menu .sub-menu {
top: 0;
border-top:none;
border-left: 3px solid cornflowerblue;
left: 160%;
}
.nav-menu li:hover > .sub-menu {
top: 4rem;
opacity: 1;
visibility: visible;
}
.sub-menu li:hover > .sub-menu {
top: inherit;
left: 110%;
margin-top: -1.5rem;
border-radius: 0;
}
@media(max-width:845px){
.nav-menu{
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
background-color: #262626;
width: 100%;
text-align: center;}
.nav-menu.active{
left: 0;
}
.sub-menu {
position: initial;
border: 3px solid transparent;
border-left-color: cornflowerblue;
margin-left: 1rem;
max-height: 0;
}
.sub-menu::before {
display: none;
}
.nav-menu li:hover> .sub-menu{
opacity: 1;
visibility: visible;
max-height: initial;
}
.nav-menu li:not(:hover)> .sub-menu{
display:none;
}
.sub-menu .sub-menu {display: none;}
}
AdChoices