title: Menu in iphone invisible, but clickable?
body: <p>The hamburger-menu that appears in mobile devices works good in Android. But in ios (not the desktop responsive browser, but the actual apple device) it seems to be invisible but on click is still functioning as its options can still be clicked and we navigate to another page.</p>
  
  <p>The site link is attached for reference as follows:
  <a href="https://www.cumminsfest.in/" rel="nofollow noreferrer">CumminsFest.in</a></p>
  
  <p>I have checked out for many such problems before, all are stating that they are related to:</p>
  
  <pre><code>{
   - z-index
   - webkit-overflow-scrolling:touch
   - overflow:hidden
  }
  </code></pre>
  
  <p>But none of them seems to work, one of the reasons being I might be doing something wrong.</p>
  
  <p>My code for menu is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
  $('.hamburger-menu').on('click', function() {
      $(this).toggleClass('open');
      $('.site-navigation').toggleClass('show')
  }); 
  })(jQuery)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.site-header {
  position: relative;
  width: 100%;
  }
  
  /*------------------------------------------------------------
  ## header-bar
  ------------------------------------------------------------*/
  .site-header .header-bar {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999;
      width: 100%;
      padding: 20px 0;
      text-align: center; 
      background: black ;
  }
  
  .header-bar .site-branding {
      margin-bottom: 0;
      font-size: 30px;
      font-weight: 800;
  }
  
  .header-bar .site-branding a {
      color: hsl(0, 0%, 100%);
      text-decoration: none;
  }
  
  /*------------------------------------------------------------
  ### site-navigation
  ------------------------------------------------------------*/
  /*
    Hamburger Menu
  ----------------------------------------*/
  .hamburger-menu {
      position: relative;
      width: 100%;
      max-width: 24px;
      height: 22px;
      margin-left: auto;
      transition: .5s ease-in-out;
      cursor: pointer;
  }
  
  .hamburger-menu span {
      display: block;
      position: absolute;
      height: 2px;
      width: 100%;
      background: #fff;
      border-radius: 10px;
      opacity: 1;
      left: 0;
      transition: .25s ease-in-out;
  }
  
  .hamburger-menu span:nth-child(1) {
      top: 2px;
  }
  
  .hamburger-menu span:nth-child(2),
  .hamburger-menu span:nth-child(3) {
      top: 10px;
  }
  
  .hamburger-menu span:nth-child(4) {
      top: 18px;
  }
  
  .hamburger-menu.open span:nth-child(1) {
      top: 18px;
      width: 0;
      left: 50%;
  }
  
  .hamburger-menu.open span:nth-child(2) {
      transform: rotate(45deg);
  }
  
  .hamburger-menu.open span:nth-child(3) {
      transform: rotate(-45deg);
  }
  
  .hamburger-menu.open span:nth-child(4) {
      top: 18px;
      width: 0;
      left: 50%;
  }
  
  .site-navigation {
      position: absolute;
      top: -11px;
      right: 15px;
      z-index: 9999  !important;
      width: 100%;
      height: 22px;
      overflow-x: hidden;
      list-style: none;
      transition: all .35s;
      color: hsl(0, 0%, 100%);
  }
  
  .site-navigation.show {
      height: auto;
  }
  
  .site-navigation ul {
      position: fixed;
      top: 0;
      left: -320px;
      z-index: 9999  !important;
      width: 250px;                                                               /*adddddd for cross of hamburger*/
      height: 100vh;
      overflow-x: scroll;
      padding: 10px;
      margin: 0;
      background: #050505;
      transition: all 0.35s;
  }  
  
  .site-navigation.show ul {
      left: 0;
  }
  
  .site-navigation ul li {
      display: block;
      padding: 15px 0;
  }   
  
  .site-navigation ul li a {
      display: block;
      color: #fff;
      transition: all 0.35s;
      text-decoration: none;
      font-size: 14px;
      padding-left: 0px;                                                                              
  }
  
  @media screen and (min-width: 992px) {    
      .site-navigation ul li a {                                                              
          padding-left: 40px;
      }       
      .header-bar .site-branding {
          margin-left: 35px;
      }    
      .site-navigation {
          position: relative;
          top: auto;
          right: auto;
          height: auto;
          padding-right: 35px;
          background: transparent;
          z-index: 9999  !important;
      }    
      .site-navigation ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end;
          align-items: center;
          position: relative;
          top: auto;
          left: auto;
          width: 100%;
          height: auto;
          padding: 0;
          overflow: auto;
          background: transparent;
          z-index: 9999  !important;
      }
      .site-navigation ul li {
          padding: 0;
      }
      .site-navigation ul li a {
          color: #fff;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header class="site-header"&gt;
      &lt;div class="header-bar"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row align-items-center"&gt;
                  &lt;div class="col-10 col-lg-4"&gt;
                      &lt;h1 class="site-branding flex"&gt;
                          &lt;a href="index.html"&gt;INNOVATION&lt;/a&gt;
                      &lt;/h1&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-2 col-lg-8"&gt;
                      &lt;nav class="site-navigation"&gt;
                          &lt;div class="hamburger-menu d-lg-none"&gt;
                             &lt;span onclick="void(0)"&gt;&lt;/span&gt;
                              &lt;span onclick="void(0)"&gt;&lt;/span&gt;
                              &lt;span onclick="void(0)"&gt;&lt;/span&gt;
                              &lt;span onclick="void(0)"&gt;&lt;/span&gt;
                          &lt;/div&gt;&lt;!-- .hamburger-menu --&gt;
  
                          &lt;ul&gt;
                              &lt;img id="mylogo" src="img.jpeg" height="130" width="130"&gt; 
                              &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="index.html#redirect1"&gt;EVENTS&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;SPONSORS&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;ACCOMODATION&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;&lt;!-- flex --&gt;                                          
                      &lt;/nav&gt;&lt;!-- .site-navigation --&gt;
                  &lt;/div&gt;&lt;!-- .col-12 --&gt;
              &lt;/div&gt;&lt;!-- .row --&gt;
          &lt;/div&gt;&lt;!-- container-fluid --&gt;
      &lt;/div&gt;&lt;!-- header-bar --&gt;
  &lt;/header&gt;&lt;!-- .site-header --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is really appreciated.</p>