ハンバーガーボタンでメニューを開くと、メニューが上にはみ出て半分表示されない現象

ハンバーガーメニューをopenしてメニューを表示させたときに、メニューが上の方にはみ出てしまいます。
検証ツールで確認したところ、下記のようにpositionが-454.5という値になってしまいます。

positionが原因なのかと思い、positionを解除したりしてみましたが、原因が特定できませんでした。
コードは下記のようになっています。
Sassを覚えたてでコードが見辛い等ありましたら、訂正いたしますのでお知らせください。
どなたかご教示いただけますと幸いです。何そつよろしくお願いいたします。

       <!-- navi -->
        <div class="header__navi">
           <div class="header__navi-inner">
               <div class="header__navi-logo">
                   <a href="../TOP/index.html">
                       <img src="../images/aaa_logo_w.png" alt="">
                   </a>
               </div>
               <ul class="navi-list">
                   <li class="navi-list__item">
                       <a href="../TOP/index.html">
                        TOP
                       </a>
                   </li>
                   <li class="navi-list__item">
                       <a href="#concept">
                           CONCEPT
                       </a>
                   </li>
                   <li class="navi-list__item">
                       <a href="#about">
                           ABOUT
                       </a>
                   </li>
                   <li class="navi-list__item">
                       <a href="#works">
                           WORKS
                       </a>
                   </li>
                   <li class="navi-list__item">
                       <a href="#contact">
                           CONTACT
                       </a>
                   </li>
               </ul>
               <!--ハンバーガー-->
               <div class="hamburger">
                   <div class="hamburger__inner">
                       <span class="hamburger__bar hamburger__bar--top"></span>
                       <span class="hamburger__bar hamburger__bar--middle"></span>
                       <span class="hamburger__bar hamburger__bar--bottom"></span>
                   </div>
               </div>
               <!--ハンバーガー-->
           </div>
       </div>
       <!-- navi -->

.header__navi {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #6EAD81;
    
    @include tab {
        height: 60px;
        width: 100%;
    }

&-inner {
    height: 5.2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    @include tab {
        height: auto;
        display: flex;
    }
}

&-logo {
    width: 6%;
    margin-left: 32px;
    @include tab {
        width: 60px;
        margin-left: 15px;
    }
}

}

.navi-list {
    display: flex;
    
@include tab {
    display: none;
    padding-top: 50%;
    position: fixed;
    background-color: #6EAD81;
    z-index: 5;
    width: 100%;
    height: 100vh;

}
}

.nav-list .open {
display: block;
}

.navi-list__item {
font-size: 20px;
margin-right: 32px;
margin-top: 0;
}

.navi-list__item:nth-of-type(1) {
@include tab {
    margin-top: 0;
}
}

.header-title {
position: absolute;
text-align: right;
top: 40%;
left: 30%;

@include tab {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}



&__text {
    padding: 16px 32px;
    font-size: 32px;

    @include tab {
        padding: 8px 16px;
    }
}


&--top,
&--bottom {
    background-color: #fff;
    font-size: 50px;
    white-space: nowrap;

    @include tab {
        background-color: transparent;
        color: #FAF9F8;
        font-size: 32px;
    }
}

&--bottom {
    margin-top: 10px;
    display: inline-block;

    @include tab {
        margin-top: 0;
    }
}
}

// ハンバーガー
.hamburger {
position: fixed;
z-index: 5;
right: 0;
height: 60px;
padding: 15px;
display: flex;
justify-content: center; 
align-items: center;   

&__inner {
    display: none;

    @include tab {
        display: block;
    }
}

&__bar {
    background-color: #FAF9F8;
    display: block;
    height: 2px;
    width: 40px;
    transition : 0.3s ease-in-out;
}

&__bar--middle,
&__bar--bottom {
    margin-top: 10px;
}

&.cross &__bar--top {
    transform: rotate(45deg) translate(7px,7px);
}

&.cross &__bar--middle {
    opacity: 0;
}

&.cross &__bar--bottom {
    transform: rotate(-45deg) translate(9px,-9px);
}    
}

body.noscroll {
overflow: hidden;
}

$(function() {
    $('.hamburger').on('click',function() {
        $('.navi-list').fadeToggle(300);
        $(this).toggleClass('cross');
        $('body').toggleClass('noscroll');
    });
        window.matchMedia('(max-width: 1190px)').addEventListener('change', e => {
            if (!e.matches) $('.navi-list').attr('style', null);
          });
});