Наложение меню поверх header`a и проблема с открытием меню на jquery

При определенной ширине экрана ссылки для навигации на сайте пропадают и появляется кнопка(ширина - 1366х1024), при нажатии на которую появляется сайдбар. Проблема в том, что сайдбар накладывается поверх шапки сайта и так быть не должно. Также в коде появления сайдбара на jquery прописанно появление кнопки закрытия сайдбара, но этого не происходит. Код html, css и jquery оставлю ниже на google drive`e

https://drive.google.com/file/d/12PIuJtQtHuFPnINkylMtXgdneb5tOMZD/view?usp=sharing

Код для открытия и закрытия меню:

navBtn.onclick = () => {
    nav.classList.add('open')
    closemenu.classList.add('open')
};
function pause(delay) {
    var startTime = Date.now();
  
    while (Date.now() - startTime < delay);
  }
closemenu.onclick = () => {
    pause(500);
    nav.classList.remove('open')
    closemenu.classList.remove('open')
}

Css код header`a и меню:

header{
    width: 100%;
    padding: 10px 30px;
    margin: 0;
    background-color: #2C3E50;
    color: white;
    font-family: 'Play', sans-serif;
    position: fixed;
    display: block;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 15vh;
}
@media(max-width: 1370px){
    #closemenu{
        display: none;
        position: absolute;
        color: black;
        font-size: 60px;
        top: 90vh;
        right: 3%;
        z-index: 100;
    }
    #closemenu:hover{
        transform: scale(1);
    }
    header{
        height: 12vh;
        z-index: 1000;
        position: fixed;
    }
    nav{
        display: none;
        color: #17202A;
        background-color: #fff;
        position: fixed;
        z-index: 1;
        width: 30%;
        height: 100vh;
        margin: auto;
        padding: 0;
        vertical-align: top;
        top: 0;
        right: 0;
    }
    .nav{
        z-index: 1;
        margin: auto;
        position: absolute;
        height: 100vh;
        width: 100%;
        top: 15%;
        left: 0;
    }
    .navLink{
        color: black;
        display: block;
        font-size: 35px;
    }
    #phonenumber,#adres{
        display: none;
    }
    #navBtn{
        display: inline-block;
    }
    .name{
        top: 25%;
    }
    #servtitle{
        top: 50%;
    }
    #navBtn:focus .nav{
        display: block;
    }
    .secname{
        top: 35%;
        left: 7%;
    }
    .secnav{
        top: 40%;
        left: 10%;
    }
    #aboutus{
        left: 60%;
    }
    #aboutus-title{
        left: 40%;
    }
    #aboutus-text{
        left: 20%;
    }
}