ハンバーガーメニューボタンを押してもメニュー一覧が表示されない

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

こちらのハンバーガーメニューで、メニュー一覧を表示するようにしたいのですが、
ハンバーガーボタンを押しても✖︎に切り替わるだけで、メニュー一覧が表示されず困っております。
検証ツールで確認すると、display: blockと表示はされているのですが、見当たりません。
おそらく裏側の方にあるのかなと思っておりますが、対処法がわかりません。

該当のソースコード

    <header>
        <div class="container">
            <div class="header-inner">
                <h1 class="header-left">クリ★スタ</h1>
                <div class="nav-wrapper">
                    <nav class="header-nav">
                        <ul class="header-list">
                            <li class="nav-item"><a href="#about">About</a></li>
                            <li class="nav-item"><a href="#blog">News</a></li>
                            <li class="nav-item"><a href="#access">Access</a></li>
                        </ul>
                    </nav>
                </div>
             <!-- ハンバーガー -->
                <button class="burger-btn">
                    <span class="bars">
                        <span class="bar bar_top"></span>
                        <span class="bar bar_mid"></span>
                        <span class="bar bar_bottom"></span>
                    </span>
                </button>
            </div>
            <!-- ハンバーガー -->
        </div>

    </header>

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

    /* burger menu */
    
    .header {
        padding: 0 5%;
    }
    
    .burger-btn {
        display: block;
        width: 39px;
        height: 39px;
        position: relative;
        z-index: 3;
        background-color: transparent;
        border: none;
    }
    
    .bar {
        width: 20px;
        height: 1px;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background-color: white;
    }
    
    .bar_top {
        top: 10px;
    }
    
    .bar_mid {
        top: 50%;
        transform: translate(-50%,-50%);
    }
    
    .bar_bottom {
        bottom: 10px;
    }
    
    .burger-btn.close .bar_top{
	transform: translate(-50%,10px) rotate(45deg);
	transition: transform .3s;
  }
  .burger-btn.close .bar_mid{
	opacity: 0;
	transition: opacity .3s;
  }
  .burger-btn.close .bar_bottom{
	transform: translate(-50%,-8px) rotate(-45deg);
	transition: transform .3s;
  }

  .nav-wrapper{
	display: none;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
   }

  .header-nav{
    width: 100%;
    height: 100%;
    background-color:#1B1310;
    z-index: 2;
  }
  
 .header-nav .nav-list{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
  }
  .header-nav .nav-item{
    margin-right: 0;
    margin-bottom: 40px;
  }
    
    /* burger menu */


$(function(){
    
    $('.burger-btn').on('click',function(){
        $('.burger-btn').toggleClass('close');
        $('.nav-wrapper').fadeToggle(500);
        $('body').toggleClass('noscroll');
       });

       
    
       if( $(window).width() < 768 ){
        $('.nav-item>a').on('click',function(){
          $('.nav-wrapper').fadeOut(500);
          $('.burger-btn').removeClass('close');
          $('body').removeClass('noscroll');
        });
      }

});