My website navigation bugging on some iOS devices - ios

Question

Today when testing a project of mine, I found out that the mobile navigation of my website isn't show it's list items on some iOS devices.
I tested on Iphone 5 and IPad mini, and those worked,
then i tested on an Iphone 4 and a old Ipad and it didnt show the list items of my navigation. So i think it i enclosed the problem to a outdate iOS or device i guess?
I really have no idea how i should be debugging this problem without being able to use the inspect element tool i have on a desktop. I also don't really find a problem in my code.
My website url is: http://gillesvercammen.be/praniels/
if anyone could be brave enough to test this on an older iOS device, that would be awesome. Below I will put some snippets of relevant code for the bug.
Please forgive me if my code is a little messy, this is my first decent sized project.
This is my full navigation (although the problem only lies in the list items not showing when expanding the hamburger menu)
<header>
<a href="#" title="praniels logo" class="logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo van praniels">
</a>
<nav class="floatfix nav">
<div id="hamburgerknop">
<a href="#" title="praniels logo" class="mobile-logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo van praniels">
</a>
<span id="hamburger" class="fa fa-bars"></span>
</div>
<ul class="main-nav">
<li><a class="<?php if(isset($home)){ echo($home); } ?>" href="<?=$prefix?>index.php" title="naar homepage">Home</a></li>
<li><a class="<?php if(isset($overons)){echo($overons);} ?>" href="<?=$prefix?>over-ons/over-ons.php" title="naar over ons">Over Ons</a></li>
<li><a class="<?php if(isset($producten)){echo($producten);} ?>" href="<?=$prefix?>producten/producten.php" title="naar producten">Producten</a></li>
<li><a class="<?php if(isset($workshops)){echo($workshops);} ?>" href="<?=$prefix?>workshops/workshops.php" title="naar workshops pagina">Workshops</a></li>
<li><a class="<?php if(isset($klanten)){echo($klanten);} ?>" href="<?=$prefix?>klanten/klanten.php" title="naar klantenpagina">Klanten</a></li>
<li><a class="<?php if(isset($contact)){echo($contact);} ?>" href="<?=$prefix?>contact/contact.php" title="naar contactpagina">Contact</a></li>
</ul>
<ul class="icon-nav">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-google-plus"></span></li>
<li><span class="fa fa-instagram" target=_"blank"></span></li>
</ul>
<?php
if(isset($_SESSION["fldEmail"])){
?>
<span class="fa fa-lock"></span>Logout
<?php if(isset($_SESSION["admin"])) { ?>
<span class="fa fa-lock"></span>Admin
<?php } else {}}
else { ?> <span class="fa fa-unlock-alt"></span>Login <?php }
?>
</nav>
</header>
Following are some relevant 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;
}
.main-nav {
list-style: none;
}
.mobile-logo {
display: none;
}
.nav li {
display: inline-block;
vertical-align: middle;
height: 120px;
letter-spacing: 1px;
text-transform: uppercase;
}
.nav li a {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
text-decoration: none;
display: block;
line-height: 16px;
height: 16px;
padding: 25px 10px 24px;
}
.nav li a:hover {
color: rgb(212,192,152);
}
.nav ul li .active {
color: rgb(212,192,152);
}
.icon-nav {
position: absolute;
right: 0px;
top: 0;
margin-right: 50px;
}
.icon {
display: inline-block;
zoom: 1;
vertical-align: top;
width: 44px;
height: 0;
padding-top: 44px;
overflow: hidden;
text-align: left;
white-space: nowrap;
}
.logout {
position: absolute;
right: 10px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.admingo {
position: absolute;
right: 80px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.fa-lock, .fa-unlock-alt {
margin-right: 5px;
}
.logout:hover {
border: 1px solid rgb(212,192,152);
color: rgb(212,192,152);
}
/* ================= RWD =============== */
#media screen and (min-width: 769px) {
.logo {display: block !important; }
#hamburgerknop { display: none !important; }
.nav { display: block !important; }
}
#media screen and (max-width: 768px) {
header {
height: 80px;
}
.main-nav {
display: none;
}
.expand .main-nav {
display: block;
}
#hamburgerknop {
background: rgba(31,15,16, 0.35);
padding: 8px;
text-decoration: none;
width: 100%;
z-index: 2;
height: 80px;
}
#hamburgerknop span {
margin-top: 15px;
cursor: pointer;
display: block;
padding: 3px 4px 3px;
position: relative;
color: rgb(246,246,226);
font-size: 2em;
line-height: .8;
text-align: center;
}
.nav ul {
list-style: none;
margin: 0;
width: 100%;
height: 100%;
background-color:rgb(31,15,16);
padding: 0;
}
.main-nav {
height: 0px;
}
.nav li:nth-child(1){
padding-top: 5%;
}
.nav li {
display: block;
position: relative;
font-size: 1em;
font-weight: bold;
height: 20%;
}
.nav li a {
height: initial;
display: block ;
background: none !important;
color: #fff;
text-decoration: none;
}
.nav {
clear: both;
position: fixed;
}
nav {
height: auto;
display: none;
position: fixed;
}
.expand {
display: block !important;
}
.logo {
display: none;
}
.mobile-logo {
z-index: 12;
position: absolute;
top: 0;
display: block;
margin-top: 5px;
width: 100px;
}
}

Answer 1

Please use below mentioned code:
.non-transparent {
background-color: #1f0f10 !important;
max-height: 100%;
overflow: auto;
z-index: 11;
}
instead
.non-transparent
{
z-index: 11;
background-color: rgb(31,15,16) !important;
}