Hi everyone, I'm facing an issue with the header on my website. It displays a hamburger menu on small screens, and while it works perfectly on PCs and Android phones, it's unresponsive on iOS, specifically on my iPhone 8. I've tried using various jQuery methods like slideToggle, toggle, and hide/show, but none of them seem to work on iOS. I even added an alert to check if the touch event is being recognized, which it is. I've tried surrounding it with anchor tags, setting cursor:pointer in the CSS, clearing the browser cache, and even using different CDNs from Github, but nothing has worked so far. I read about Ajax causing issues and made sure it's set to false, but that didn't solve the problem either. I've checked display settings and tried multiple CDNs, but nothing seems to fix the issue on iOS. I would greatly appreciate any help or suggestions.
You can find my code on jsfiddle here: https://jsfiddle.net/62pmq7ju/9/
<div class="header">
<a><div><img src="img/icon.png" alt="" width="40px" height="45px" class="myMenu"/></div></a>
<div class="hiddenMenu"></div>
</div>
.hiddenMenu {
position: fixed;
width: 100%;
background-image: url(img/headerBackground.jpg);
top:45px;
display: block;
cursor: pointer;
}
.myMenu {
position: relative;
float: left;
padding-left: 5px;
display: block;
cursor: pointer;
}
<script>
$(document).bind("mobileinit", function () {
// jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page), especially when going back, hence disabling it.
$.extend($.mobile, {
ajaxEnabled: false
});
});
$(".hiddenMenu").hide();
$(".myMenu").on("click", function(){
$(".hiddenMenu").toggle();
});
</script>
The jsfiddle works on Android and Windows, but not on iOS devices when using Chrome or Safari. I've been troubleshooting this for days and would appreciate any help or guidance. If I missed out on any crucial details, please let me know.