スマホのみハンバーガーメニューを表示

スマホのときだけハンバーガーメニュー表示するコードを書いたのですが、ナビメニューが動画に隠れてしまい表示されません。ちなみにローカルだと表示されるのですがサーバーへアップロードしたらなぜかメインビジュアル画像に隠れちゃってます。リンクも貼っておきます。
リンク内容＊＊＊＊

HTML
<nav id="navi">
            <ul class="nav-menu">
                <li><a href="#project">施設紹介</a></li>
                <li><a href="#room">部屋について</a></li>
                <li><a href="#meal">食事について</a></li>
                <li><a href="#custmer">宿泊料金のご案内</a></li>
                <li><a href="#acsess">基本情報・アクセス</a></li>
                <li><a href="#reserve">ご予約・お問い合わせ<br>よくある質問</a></li>
            </ul>

            <ul class="nav-sns">
                <li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
                <li><a href="https://www.facebook.com/" target="_blank">facebook</a></li>
                <li><a href="https://www.instagram.com/" target="_blank">instagram</a></li>
            </ul>
        </nav>

        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>

        <div id="mask"></div>
</header>

    <div class="container">
        <main>
            <div id="video">
                <video class="bg-video" src="movie/Sea - 6399.mp4" loop autoplay muted playsinline></video>
            </div>

css
#video .bg-video {
    width: 100%;
    height: 100vh;
    position: fixed;
    /* top: -220px; */
    z-index: -10;
}

#header {
        width: 100%;
        height: 60px;
        padding: 0;
        z-index: 10;
    }

    #header .name {
        font-size: 1.2rem;
        margin-top: 20px;
    }

    .logo {
        display: none;
    }

    #navi {
        width: 300px;
        height: 100vh;
        background: #fff;
        padding: 25px;
        position: fixed;
        top: 0;
        left: -300px;
        bottom: 0;
        opacity: 0;
        /* スクロールバー */
        overflow-y: auto;
        transition: 0.5s;
        z-index: 20;
    }

    .open #navi {
        left: 0;
        opacity: 1;
        z-index: 30;
    }

    #navi ul.nav-menu {
        margin-bottom: 30px;
    }

    #navi ul li {
        padding: 10px 0;
    }

    .hamburger {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        cursor: pointer;
        position: fixed;
        top: 22px;
        right: 18px;
        transition: 0.5s;
        z-index: 20;
    }

    .hamburger span {
        width: 30px;
        height: 2px;
        background-color: #330000;
        border-radius: 4px;
        display: block;
        position: absolute;
        left: 0;
        transition: 0.5s;
    }

    .hamburger span:nth-child(1) {
        top: 4px
    }

    .hamburger span:nth-child(2) {
        top: 14px;
    }

    .hamburger span:nth-child(3) {
        bottom: 4px;
    }

    .open .hamburger span {
        background-color: #fff;
    }

    .open .hamburger span:nth-child(1) {
        transform: translateY(10px) rotate(-315deg);
    }

    .open .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .open .hamburger span:nth-child(3) {
        transform: translateY(-10px) rotate(315deg);
    }

    #mask {
        display: none;
        transition: 0.5s;
    }

    .open #mask {
        width: 100%;
        height: 100%;
        background-color: #000;
        cursor: pointer;
        display: block;
        opacity: 0.8;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }

    #to-top {
        margin-right: 30px;
    }

jQuery
$('.hamburger').on('click', function() {
      if ($('#header').hasClass('open')) {
        $('#header').removeClass('open');
      } else {
        $('#header').addClass('open');
      }
    });
  
    // #maskのエリアをクリックした時にメニューを閉じる
    $('#mask').on('click', function() {
      $('#header').removeClass('open');
    });
  
    // リンクをクリックした時にメニューを閉じる
    $('#navi a').on('click', function() {
      $('#header').removeClass('open');
    });