モーダルウィンドウ表示中にハンバーガーメニューをクリックできないようにしたい

前提・実現したいこと

モーダルウィンドウの背景を押すとどこを押してもモーダルが閉じるようにしたいです。
現在、モーダル表示中に、なぜかハンバーガーメニューはクリック出来てしまいます。
モーダルとメニューが同時に出てくるということが起きています。

どうすれば解決できるのか…
ご指導お願い致します！！

どこまで記載すれば良いのか把握できておらず、コードが長くなってしまい申し訳ありません。

該当のソースコード

html
1<div class="header-sp-right">
2      <nav class="header-sp-nav">
3        <ul class="header-sp-menu">
4          <li class="header-sp-room header-sp-menu-list"><a href="">お部屋</a></li>
5          <li class="header-sp-food header-sp-menu-list"><a href="">お料理</a></li>
6          <li class="header-sp-spa header-sp-menu-list"><a href="">温泉</a></li>
7        </ul>
8        <div class="header-sp-booking">
9          <a href="" class="js-modal-sp-open">
10            <div class="header-sp-booking-inner">
11              <img src="img/calender.png" alt="">
12              <p>予約</p>
13            </div>
14          </a>
15        </div>
16      </nav>
17      <div class="modal-sp js-modal-sp">
18        <div class="modal-sp-bg js-modal-sp-close">
19          <div class="modal-sp-contents">
20            <div class="modal-sp-content-box">
21              <select name="booking-menu">
22                <option value="Cha-kaiseki">①</option>
23                <option value="stay">②</option>
24                <option value="family">③</option>
25              </select>
26            </div>
27            <a href="" class="js-modal-sp-close">閉じる</a>
28          </div>
29        </div>
30      </div>
31      <div class="ham">
32        <span class="ham-line ham-line1"></span>
33        <span class="ham-line ham-line2"></span>
34        <span class="ham-line ham-line3"></span>
35      </div>
36    </div>

scss
1//style.scss
2
3$sspc: 800px;

scss
1
2@import 'style.scss';
3
4.header-sp-right {
5
6    display: none;
7
8    @include sspc {
9
10      display: flex;
11    }
12
13    .header-sp-nav {
14      margin-right: 2em;
15
16      .header-sp-menu {
17
18        display: none;
19
20        @include sspc {
21          width: 30%;
22          height: 100vh;
23          display: flex;
24          flex-direction: column;
25          background-color: rgba(0, 0, 0, 0.16);
26          transition: 0.3s;
27          position: fixed;
28          z-index: 20;
29          top: 7em;
30          right: -40%;
31        }
32
33        &:first-child {
34          padding-top: 20px;
35        }
36
37        .header-sp-menu-list {
38
39          a {
40            display: block;
41            font-size: 21px;
42            color: #FFFFFF;
43            padding: 1em;
44          }
45        }
46      }
47
48      .header-sp-booking {
49
50        a {
51          display: block;
52
53          .header-sp-booking-inner {
54            width: 13em;
55            height: 4.4em;
56            background-color: #978F10;
57            display: flex;
58            align-items: center;
59            justify-content: center;
60
61            img {
62              width: 2em;
63              height: 2em;
64              padding-right: 1em;
65            }
66
67            p {
68              font-size: 1.6em;
69              font-weight: bold;
70              line-height: 3;
71              color: #FFFFFF;
72            }
73          }
74        }
75      }
76    }
77
78    .header-sp-menu.open {
79      right: 0;
80    }
81
82    .modal-sp {
83      display: none;
84      height: 100vh;
85      position: fixed;
86      top: 0;
87      left: 0;
88      width: 100%;
89
90      .modal-sp-bg {
91        background: rgba(0, 0, 0, 0.8);
92        height: 100vh;
93        position: absolute;
94        width: 100%;
95
96        .modal-sp-contents {
97          background: #FFFFFF;
98          padding: 1em;
99          position: absolute;
100          top: 50%;
101          left: 50%;
102          transform: translate(-50%, -50%);
103          width: 60%;
104
105          .modal-sp-content-box {
106            padding: 4em;
107          }
108        }
109      }
110    }
111
112    .ham {
113      display: none;
114      width: 5em;
115      height: 5em;
116      cursor: pointer;
117      position: relative;
118
119      @include sspc {
120        display: block;
121      }
122
123      .ham-line {
124        position: absolute;
125        left: 1em;
126        width: 3em;
127        height: 0.2em;
128        background-color: #FFFFFF;
129        transition: all 0.3s;
130      }
131
132      .ham-line1 {
133        top: 0.7em;
134      }
135
136      .ham-line1.open {
137        transform: rotate(45deg);
138        top: 2em;
139      }
140
141      .ham-line2 {
142        top: 1.9em;
143      }
144
145      .ham-line2.open {
146        width: 0;
147      }
148
149      .ham-line3 {
150        top: 3.2em;
151      }
152
153      .ham-line3.open {
154        transform: rotate(-45deg);
155        top: 2em;
156      }
157    }
158  }

javascript
1$(function () {
2
3  //ハンバーガーメニュー開閉
4  $('.ham').on('click', function () {
5    $('.header-sp-menu, .ham, .ham-line1, .ham-line2, .ham-line3').toggleClass('open');
6  });
7
8  //ハンバーガーメニューのナビリンククリック後自動で閉じる
9  $('.header-sp-menu-list a').on('click', function () {
10    $('.ham').click();
11  });
12
13  //スクロールしたらヘッダーが変わる
14  window.addEventListener('scroll', function () {
15    var header = document.querySelector('header');
16    header.classList.toggle('scroll-nav', window.scrollY > 0);
17  });
18
19  //宿泊予約モーダル(PC)
20  $('.js-modal-open').on('click', function () {
21    $('.js-modal').fadeIn();
22    return false;
23  });
24  $('.js-modal-close').on('click', function () {
25    $('.js-modal').fadeOut();
26    return false;
27  });
28
29  //宿泊予約モーダル(SP)
30  $('.js-modal-sp-open').on('click', function () {
31    $('.js-modal-sp').fadeIn();
32    return false;
33  });
34  $('.js-modal-sp-close').on('click', function () {
35    $('.js-modal-sp').fadeOut();
36    // しかし、画像をクリックでキャンセルさせる
37    $('.modal-sp-content-box').on('click', function (e) {
38      e.stopPropagation();
39    });
40    return false;
41  });
42
43});

試したこと

.modal-sp-bgにz-index:40;、.hamにz-index:30;を追加してみましたが変わりませんでした。

補足情報（FW/ツールのバージョンなど）

scssで記述しています。
主にjQueryを使用していますが、Javascriptも混ざっています。

行動規範の内容に同意します

回答2件

自己解決

htmlの順番を変えると解決しました。
回答いただいた方、ありがとうございました。

html
1<div class="header-sp-right">
2      <nav class="header-sp-nav">
3        <ul class="header-sp-menu">
4          <li class="header-sp-room header-sp-menu-list"><a href="">お部屋</a></li>
5          <li class="header-sp-food header-sp-menu-list"><a href="">お料理</a></li>
6          <li class="header-sp-spa header-sp-menu-list"><a href="">温泉</a></li>
7        </ul>
8        <div class="header-sp-right-right">
9          <div class="header-sp-booking">
10            <a href="" class="js-modal-sp-open">
11              <div class="header-sp-booking-inner">
12                <img src="img/calender.png" alt="宿泊予約のカレンダー画像">
13                <p>宿泊予約</p>
14              </div>
15            </a>
16          </div>
17          <div class="ham">
18            <span class="ham-line ham-line1"></span>
19            <span class="ham-line ham-line2"></span>
20            <span class="ham-line ham-line3"></span>
21          </div>
22        </div>
23      </nav>
24      <div class="modal-sp js-modal-sp">
25        <div class="modal-sp-bg js-modal-sp-close">
26          <div class="modal-sp-contents">
27            <div class="modal-sp-content-box">
28              <select name="booking-menu">
29                <option value="Cha-kaiseki">①【期間限定】海辺の四季旬彩、贅沢美味懐石プラン</option>
30                <option value="stay">②平日に優雅に楽しむ、特別宿泊プラン</option>
31                <option value="family">③絶景貸切露天と個室会席を満喫できるファミリープラン</option>
32              </select>
33            </div>
34            <a href="" class="js-modal-sp-close">閉じる</a>
35          </div>
36        </div>
37      </div>
38    </div>