Menu bar (navbar) is invisible on iphone browsers - html

Question

I just deployed my web app and the nav bar(menu bar) seems to be present but not visible when displayed on iphone browsers(Chrome & Safari) yet it displays perfectly on android browsers.
this is how it displays on android(perfectly):
android mobile view
image of iphone mobile view
iphone mobile view
below is the HTML code for the header:
<header class="s-header">
<div class="header__top">
<div class="header__logo">
<a class="site-logo" href="/">
<h1 class="blog_logo"
>BRICK
STORIES</h1>
</a>
</div>
<div class="header__search">
<form role="search" method="get" action="">
<!-- <span class="hide-content">Search for:</span> -->
<input type="search" style="margin:3rem auto" placeholder="search here" value="{{ request.get.q }}"
name="q">
<input type="submit" class="header__search-submit" value="Search">
</form>
</div><!-- end header__search -->
<!-- toggles -->
<span>Menu</span>
</div> <!-- end header__top -->
<nav class="header__nav-wrap">
{% if user.is_authenticated %}
<h4 style="color: white;font-style: italic;">hello {{ user.first_name }}!</h4>
{% endif %}
<ul class="header__nav">
<li>Home</li>
{% if user.is_authenticated %}
<li>Logout</li>
{% else %}
<li>Register</li>
<li>Login</li>
{% endif %}
<li class="has-children current">
Categories
<ul class="sub-menu">
<li>Lifestyle</li>
<li>Health</li>
<li>Travel</li>
<li>Fashion</li>
<!-- <li>Family</li> -->
<li>Management</li>
<li>Food</li>
</ul>
</li>
<li>About</li>
</ul> <!-- end header__nav -->
<ul class="header__social">
<li class="ss-facebook">
<a href="https://facebook.com/">
<span class="screen-reader-text">Facebook</span>
</a>
</li>
<li class="ss-twitter">
<a href="#0">
<span class="screen-reader-text">Twitter</span>
</a>
</li>
<li class="ss-instagram">
<a href="#0">
<span class="screen-reader-text">Instagram</span>
</a>
</li>
</ul>
</nav> <!-- end header__nav-wrap -->
here is the css:
.blog_logo{
font-family: 'Rajdhani', sans-serif;;
/* padding: 0rem 1.2rem; */
color:white;
letter-spacing:1rem;
font-size: 2.2rem;
padding: 0rem;
margin: 0rem;
}
.s-header {
z-index: 100;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
width: 300px;
background-color:black;
padding-top: 6.4rem;
padding-right: 3.2rem;
padding-left: 4.4rem;
overflow-y: auto;
overflow-x: hidden;
vertical-align: top;
position: fixed;
bottom: 0;
top: 0;
left: 0;
}
#media screen and (max-width:1100px) {
.s-header {
width: 100%;
background: transparent;
padding: 0;
position: static;
top: 0;
bottom: auto;
}
.header__top {
z-index: 100;
background: black;
width: 100%;
height: 78px;
position: fixed;
top: 0;
left: 0;
}
.header__logo {
color: black;
margin-top: 4px;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
position: absolute;
top: 50%;
left: 4rem;
}
.header__logo img {
width: 120px;
height: 29px;
}
.header__nav-wrap {
z-index: 99;
background:black;
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
margin: 0;
padding: 164px 60px 64px;
overflow-y: auto;
}
.nav-wrap-is-visible .header__top {
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.nav-wrap-is-visible .header__nav-wrap {
opacity: 1;
visibility: visible;
}
.nav-wrap-is-visible .header__search-trigger {
display: none;
}
.header__nav {
font-size: 20px;
border-top: 1px dotted rgba(255, 255, 255, 0.04);
}
.header__nav > li {
border-bottom: 1px dotted rgba(255, 255, 255, 0.04);
}
.header__nav > li > a {
line-height: 7.2rem;
}
.header__nav li.has-children > a::after {
top: 32px;
}
.header__nav li ul {
font-size: 12px;
}
.header__nav li ul a {
line-height: 4rem;
}
.header__menu-toggle {
z-index: 101;
display: block;
}
.header__search-trigger {
background-image: url(../images/icons/icon-search-w.svg);
height: 20px;
width: 20px;
top: 29px;
right: 9.8rem;
}
.header__search-trigger::before,
.header__search-trigger::after {
display: none;
}
.header__social {
margin-top: 8rem;
}
.header__social a {
height: 4.4rem;
width: 4.4rem;
}
}
#media screen and (max-width:900px) {
.header__search-form::after {
font-size: 1.5rem;
}
.header__search-form input[type="search"] {
max-width: none;
width: 75%;
font-size: 4.2rem;
}
}
.s-header {
z-index: 100;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
width: 300px;
background-color:black;
padding-top: 6.4rem;
padding-right: 3.2rem;
padding-left: 4.4rem;
overflow-y: auto;
overflow-x: hidden;
vertical-align: top;
position: fixed;
bottom: 0;
top: 0;
left: 0;
}
.header__logo a {
display: block;
margin: 0;
padding: 0;
outline: 0;
border: none;
transition: all 0.3s;
}
.header__logo img {
width: 125px;
height: 30px;
margin: 0;
}
.header__nav-wrap {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
max-width: 100%;
background-color:black;
margin-top: 3.2rem;
}