Строка меню (navbar) невидима в браузерах iphone

Question

Я только что развернул свое веб-приложение, и панель навигации (строка меню), кажется, присутствует, но не видна, когда отображается в браузерах iphone (Chrome & Safari), но отлично отображается в браузерах android.

это то, как оно отображается на android (идеально): android мобильный просмотр

изображение iphone мобильный просмотр iphone мобильный просмотр

ниже код HTML для заголовка:

   <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 -->
    <a href="#0" class="header__search-trigger"></a>
    <a href="#0" class="header__menu-toggle"><span>Menu</span></a>

  </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><a href="/" title="">Home</a></li>
      {% if user.is_authenticated %}
      <li><a href="../accounts/logout">Logout</a></li>
      {% else %}
      <li><a href="../accounts/register">Register</a></li>
      <li><a href="../accounts/login">Login</a></li>
      {% endif %}
      <li class="has-children current">
        <a href="#0" title="">Categories</a>
        <ul class="sub-menu">
          <li><a href="lifestyle">Lifestyle</a></li>
          <li><a href="health">Health</a></li>
          <li><a href="travel">Travel</a></li>
          <li><a href="fashion">Fashion</a></li>
          <!-- <li><a href="family">Family</a></li> -->
          <li><a href="management">Management</a></li>
          <li><a href="food">Food</a></li>
        </ul>
      </li>

      <li><a href="../about" title="">About</a></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 -->

здесь 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;
}