Hamburger Menu disappears after one use

I have a website which has a navbar that turns into a hamburger menu at (max-width: 414px). The Hamburger menu works fine when I view it through the toggle device toolbar on both chrome and safari but when I open it on an actual iPhone, the menu disappears after one use.

Not really sure how to go about fixing this problem, any advice is appreciated

HTML

<nav>
        <div class="logo" style="font-family: VCRS;"><h2>MY COILY STORY</h2></div>
        <div class="openMenu"><i class="fa fa-bars fa-3x" ></i></div>
        <ul class="mainMenu"  style="font-family: VCRS;">
        <li><a href="#home" class="active" style="font-family: VCRS";>Projects</a></li>
                <li><a href="#home"  style="font-family: VCRS;">Home</a></li>
                <li><a href="#about" style="font-family: VCRS">About</a></li>
                <li><a href="#" style="font-family: VCRS">Gallery</a></li>
                <li><a href="./Contact/index.html" style="font-family: VCRS">  Contact</a><li>
                    <div class="x">
                <div class="closeMenu"><i class="fa fa-times fa-4x"></i></div>
            </div>
        </ul>           
    </nav>

CSS

@media only screen and (max-width: 414px)  {


    nav .mainMenu {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: black;
        transition: top 1s ease;
        display: none;
    
    }

    nav .mainMenu .closeMenu {
        display: block;
        position: absolute;
        top: 60px;
        right: 50px;
        transition: top 1s ease;
    }

    nav .openMenu {
        display: block;
          
    }

    i {
        display: inline-block;
        padding: 12px;
        
        margin-top: -40%;
        left: ;
    }


.closeMenu {
    position: absolute;
    margin-top: -538px;
    left: 131px;

}

 nav .logo {
    margin: 6px;
    font-size: 3.8vw;
    cursor: pointer;
      letter-spacing: 0.2rem;
      margin-left: 4%;
      margin-top: 0.5%;

}

nav a {
    font-size: 3vw;
}


nav .mainMenu li a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-size:  5vw;
}

nav ul ul ul li {
    position: relative;
    margin-top: -60px;
    left: 150%;
    z-index: 10000;

   }
   nav ul ul li {
    width: 100%;
    float: none;
    display: list-item;
    position: relative;
    z-index: 10000;
    white-space: normal;
    margin-left: 90%;
    margin-top: -30%;
  
}

JS

const mainMenu = document.querySelector('.mainMenu');
const closeMenu = document.querySelector('.closeMenu');
const openMenu = document.querySelector('.openMenu');




openMenu.addEventListener('click',show);
closeMenu.addEventListener('click',close);

function show(){
    mainMenu.style.display = 'flex';
    mainMenu.style.top = '0';
}
function close(){
    mainMenu.style.top = '-100%';
}

Link to codepen: https://codepen.io/Ayanfe/pen/NWXwOEL