A client's mobile menu has stopped functioning for some users on both Android and iPhone. The issue seems random, and I've been unable to replicate the issue myself on any device. Below is the original code used for the mobile menu that was working perfectly up until this past week or so:
#mobileMenuLink li.active-link a {
visibility:hidden;
}
#mobileMenuLink li.active-link a:after {
visibility: visible;
font-size: 15px;
font-style: normal;
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
content: "Menu";
text-align: right;
display: inline-block;
vertical-align: right;
}
@media (max-width: 800px) {
#mobileNav .mobile-folder>a {
display:none;
}
}
@media only screen and (max-width: 800px) {
#mobileNav a, #mobileNav a:visited {
font-size: 18px !important;
line-height: 2.5em !important;
display: inline;
}
}
@media only screen and (max-width: 800px)
{
#mobileNav nav {
background-color: #ffffff;
}
#mobileNav nav ul li {
a {
color: #000000 !important;
}
&.active-link a {
border-bottom: 1px solid;
color: #999999 !important;
}
}
}
#mobileNav.menu-open {
margin-top: -24px;
height: 390px !important;
}
#mobileNav a, {
font-size: 14px !important;
}
#mobileNav nav ul li.active-link a {
border-bottom: none;
}
#mobileNav .wrapper {
padding: 2em 0;
background-color: white;
}
I tried to update this:
#mobileMenuLink li.active-link a {
visibility:hidden;
}
to this:
#mobileMenuLink li.active-link a {
color: transparent;
}
as was suggested in another forum post but had no luck with that. Any other thoughts?