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

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

HTML
1<nav id="navi">
2            <ul class="nav-menu">
3                <li><a href="#project">施設紹介</a></li>
4                <li><a href="#room">部屋について</a></li>
5                <li><a href="#meal">食事について</a></li>
6                <li><a href="#custmer">宿泊料金のご案内</a></li>
7                <li><a href="#acsess">基本情報・アクセス</a></li>
8                <li><a href="#reserve">ご予約・お問い合わせ<br>よくある質問</a></li>
9            </ul>
10
11            <ul class="nav-sns">
12                <li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
13                <li><a href="https://www.facebook.com/" target="_blank">facebook</a></li>
14                <li><a href="https://www.instagram.com/" target="_blank">instagram</a></li>
15            </ul>
16        </nav>
17
18        <div class="hamburger">
19            <span></span>
20            <span></span>
21            <span></span>
22        </div>
23
24        <div id="mask"></div>
25</header>
26
27    <div class="container">
28        <main>
29            <div id="video">
30                <video class="bg-video" src="movie/Sea - 6399.mp4" loop autoplay muted playsinline></video>
31            </div>

css
1#video .bg-video {
2    width: 100%;
3    height: 100vh;
4    position: fixed;
5    /* top: -220px; */
6    z-index: -10;
7}
8
9#header {
10        width: 100%;
11        height: 60px;
12        padding: 0;
13        z-index: 10;
14    }
15
16    #header .name {
17        font-size: 1.2rem;
18        margin-top: 20px;
19    }
20
21    .logo {
22        display: none;
23    }
24
25    #navi {
26        width: 300px;
27        height: 100vh;
28        background: #fff;
29        padding: 25px;
30        position: fixed;
31        top: 0;
32        left: -300px;
33        bottom: 0;
34        opacity: 0;
35        /* スクロールバー */
36        overflow-y: auto;
37        transition: 0.5s;
38        z-index: 20;
39    }
40
41    .open #navi {
42        left: 0;
43        opacity: 1;
44        z-index: 30;
45    }
46
47    #navi ul.nav-menu {
48        margin-bottom: 30px;
49    }
50
51    #navi ul li {
52        padding: 10px 0;
53    }
54
55    .hamburger {
56        width: 30px;
57        height: 30px;
58        margin-right: 10px;
59        cursor: pointer;
60        position: fixed;
61        top: 22px;
62        right: 18px;
63        transition: 0.5s;
64        z-index: 20;
65    }
66
67    .hamburger span {
68        width: 30px;
69        height: 2px;
70        background-color: #330000;
71        border-radius: 4px;
72        display: block;
73        position: absolute;
74        left: 0;
75        transition: 0.5s;
76    }
77
78    .hamburger span:nth-child(1) {
79        top: 4px
80    }
81
82    .hamburger span:nth-child(2) {
83        top: 14px;
84    }
85
86    .hamburger span:nth-child(3) {
87        bottom: 4px;
88    }
89
90    .open .hamburger span {
91        background-color: #fff;
92    }
93
94    .open .hamburger span:nth-child(1) {
95        transform: translateY(10px) rotate(-315deg);
96    }
97
98    .open .hamburger span:nth-child(2) {
99        opacity: 0;
100    }
101
102    .open .hamburger span:nth-child(3) {
103        transform: translateY(-10px) rotate(315deg);
104    }
105
106    #mask {
107        display: none;
108        transition: 0.5s;
109    }
110
111    .open #mask {
112        width: 100%;
113        height: 100%;
114        background-color: #000;
115        cursor: pointer;
116        display: block;
117        opacity: 0.8;
118        position: fixed;
119        top: 0;
120        left: 0;
121        z-index: 10;
122    }
123
124    #to-top {
125        margin-right: 30px;
126    }

jQuery
1$('.hamburger').on('click', function() {
2      if ($('#header').hasClass('open')) {
3        $('#header').removeClass('open');
4      } else {
5        $('#header').addClass('open');
6      }
7    });
8  
9    // #maskのエリアをクリックした時にメニューを閉じる
10    $('#mask').on('click', function() {
11      $('#header').removeClass('open');
12    });
13  
14    // リンクをクリックした時にメニューを閉じる
15    $('#navi a').on('click', function() {
16      $('#header').removeClass('open');
17    });