After testing my project today, I discovered that the mobile navigation on my website is not displaying its list items on certain iOS devices. The navigation worked fine on an iPhone 5 and iPad Mini, but failed to show the list items on an iPhone 4 and older iPad. Could this be due to outdated iOS versions or devices?
I'm unsure how to debug this issue without access to the inspect element tool on a desktop. I've reviewed my code and cannot find any apparent problems.
If anyone is willing to test this on an older iOS device, it would be greatly appreciated. Below are some snippets of relevant code related to the bug. Please excuse any messy code, as this is one of my first larger projects.
Here is the full navigation code (the issue seems to occur only when expanding the hamburger menu):
<header>
<a href="#" title="logo" class="logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo">
</a>
<nav class="floatfix nav">
<div id="hamburgerknop">
<a href="#" title="mobile logo" class="mobile-logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo">
</a>
<span id="hamburger" class="fa fa-bars"></span>
</div>
<ul class="main-nav">
<li><a href="<?=$prefix?>index.php" title="Home">Home</a></li>
<li><a href="<?=$prefix?>over-ons/over-ons.php" title="Over Ons">Over Ons</a></li>
<li><a href="<?=$prefix?>producten/producten.php" title="Producten">Producten</a></li>
<li><a href="<?=$prefix?>workshops/workshops.php" title="Workshops">Workshops</a></li>
<li><a href="<?=$prefix?>klanten/klanten.php" title="Klanten">Klanten</a></li>
<li><a href="<?=$prefix?>contact/contact.php" title="Contact">Contact</a></li>
</ul>
<ul class="icon-nav">
<li><a href="https://www.facebook.com/" class="icon icon-mono facebook" target="_blank" title="Facebook"><span class="fa fa-facebook"></span></a></li>
<li><a href="https://twitter.com/?lang=nl" class="icon icon-mono twitter" target="_blank" title="Twitter"><span class="fa fa-twitter"></span></a></li>
<li><a href="https://plus.google.com" class="icon icon-mono googleplus" target="_blank" title="Google Plus"><span class="fa fa-google-plus"></span></a></li>
<li><a href="https://www.instagram.com/" class="icon icon-mono instagram" target="_blank" title="Instagram"><span class="fa fa-instagram" target=_"blank"></span></a></li>
</ul>
<?php if(isset($_SESSION["fldEmail"])){ ?>
<a href="<?=$prefix?>logout.php" class="logout" title="Logout"><span class="fa fa-lock"></span>Logout</a>
<?php if(isset($_SESSION["admin"])) { ?>
<a href="<?=$prefix?>admin/admin.php" class="admingo" tile="Admin"><span class="fa fa-lock"></span>Admin</a>
<?php } else {}}
else { ?>
<a href="<?=$prefix?>klanten/klanten.php" class="logout" title="Login"><span class="fa fa-unlock-alt"></span>Login</a>
<?php }
?>
</nav>
</header>Below are some key CSS lines:
header {
/*background-color: rgba(255,255,255,0.5);*/
position: fixed;
left: 0;
height: 120px;
top: 0;
width: 100%;
z-index: 10;
display: block;
}
.logo {
z-index: 12;
position: absolute;
left: 50px;
top: 0;
display: block;;
width: 150px;
padding-top: 10px;
}
.nav {
z-index: 11;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
}
.non-transparent
{
z-index: 11;
background-color: rgb(31,15,16) !important;
}
...