ハンバーガーメニューの挙動をPC/タブレット/スマホと区別した動きをさせたい。

前提・実現したいこと

PC　１４４０px
TAB １０２４px
SP ６００px

上記にてブレイクポイントを設けてレスポンシブを行っていますが、SP（モバイル）時の時だけ、
ハンバーガーメニューを実装してます。

ハンバーガーメニューを押すと三本線が「×印」になり、
全体にnavメニューを表示させ、各項目を押すと全体表示が閉じて該当ページに飛ぶようにしてます。

しかし、SP以外の時（ハンバーガーメニューを使わない時）navメニューを押すとページは移動するのですが、
navメニューごと全て消えてnavタイトルのみ残る形になってします。

PCとTABの時はnavメニューを押したらそのページに移動して、且つ、ページトップには常にnavメニューが
表示されているようにしたいです。

SPの時は、ハンバーガーメニューが右上に表示され、現在の挙動通りの動きにしたいです。

該当のソースコード

html
1<header>
2    <div class="nav-inner flex">
3      <div class="nav-title flex font-title">
4        <div class="nav-main-title">TMTN</div>
5        <div class="nav-sub-title">PORTFOLIO</div>
6      </div>
7      <div class="nav-header-menu">
8        <nav class="nav-sns-menu">
9          <ul class="nav-sns-list">
10            <li class="nav-item"><a href="#"><i class="nav-snu-color fab fa-twitter"></a></i></li>
11            <li class="nav-item"><a href="#"><i class="nav-snu-color fab fa-instagram"></i></a></li>
12            <li class="nav-item"><a href="#"><i class="nav-snu-color fab fa-facebook-square"></i></a></li>
13          </ul>
14        </nav>
15        <nav id="nav-menu" class="nav-menu">
16          <ul class="nav-list">
17            <li class="nav-item"><a href="#about">ABOUT</a></li>
18            <li class="nav-item"><a href="#selfpr">SELF PR</a></li>
19            <li class="nav-item"><a href="#vision">VISION</a></li>
20            <li class="nav-item"><a href="#works">WORKS</a></li>
21            <li class="nav-item"><a href="#blog">BLOG</a></li>
22            <li class="nav-item"><a href="#contact">CONTACT</a></li>
23          </ul>
24        </nav>
25      </div>
26    </div>
27    <div class="burger-btn">
28      <span class="bar bar_top"></span>
29      <span class="bar bar_mid"></span>
30      <span class="bar bar_bottom"></span>
31    </div>
32  </header>

css
1
2.nav-inner {
3  width: 100%;
4  height: 4rem;
5  background-color: rgba(255, 255, 255, 0.719);
6  -webkit-justify-content: space-around;
7      -ms-flex-pack: distribute;
8          justify-content: space-around;
9  padding: 3rem;
10  position: fixed;
11  top: 0;
12  z-index: 1;
13}
14
15.nav-inner .nav-title {
16  width: 20rem;
17  -webkit-box-orient: vertical;
18  -webkit-box-direction: normal;
19  -webkit-flex-direction: column;
20      -ms-flex-direction: column;
21          flex-direction: column;
22}
23
24.nav-inner .nav-title .nav-main-title {
25  font-size: 2rem;
26}
27
28.nav-inner .nav-title .nav-sub-title {
29  font-size: 1rem;
30  margin-left: 1rem;
31}
32
33.nav-inner .nav-header-menu {
34  width: 30rem;
35  -webkit-box-orient: vertical;
36  -webkit-box-direction: normal;
37  -webkit-flex-direction: column;
38      -ms-flex-direction: column;
39          flex-direction: column;
40}
41
42.nav-inner .nav-header-menu .nav-sns-menu .nav-sns-list {
43  width: 38%;
44  display: -webkit-box;
45  display: -webkit-flex;
46  display: -ms-flexbox;
47  display: flex;
48  -webkit-box-pack: justify;
49  -webkit-justify-content: space-between;
50      -ms-flex-pack: justify;
51          justify-content: space-between;
52  padding-left: 1rem;
53}
54
55.nav-inner .nav-header-menu .nav-menu .nav-list {
56  width: 105%;
57  display: -webkit-box;
58  display: -webkit-flex;
59  display: -ms-flexbox;
60  display: flex;
61}
62
63.nav-item a {
64  color: black;
65  font-weight: bold;
66}
67

css
1
2/* <====== ボタンを装飾 ======> */
3@media (max-width: 600px) {
4  .burger-btn {
5    display: block;
6    width: 39px;
7    height: 39px;
8    position: relative;
9    z-index: 3;
10    border: none;
11    background-color: black;
12    margin: 0 0 0 auto;
13  }
14}
15
16@media (max-width: 600px) {
17  .bar {
18    width: 20px;
19    height: 1px;
20    display: block;
21    position: absolute;
22    left: 50%;
23    -webkit-transform: translateX(-50%);
24            transform: translateX(-50%);
25    background-color: #fff;
26  }
27}
28
29@media (max-width: 600px) {
30  .bar_top {
31    top: 10px;
32  }
33}
34
35@media (max-width: 600px) {
36  .bar_mid {
37    top: 50%;
38    -webkit-transform: translate(-50%, -50%);
39            transform: translate(-50%, -50%);
40  }
41}
42
43@media (max-width: 600px) {
44  .bar_bottom {
45    bottom: 10px;
46  }
47}
48
49/* <====== 3本線が☓印 ======> */
50@media (max-width: 600px) {
51  .burger-btn.close .bar_top {
52    -webkit-transform: translate(-50%, 10px) rotate(45deg);
53            transform: translate(-50%, 10px) rotate(45deg);
54    -webkit-transition: -webkit-transform 0.3s;
55    transition: -webkit-transform 0.3s;
56    transition: transform 0.3s;
57    transition: transform 0.3s, -webkit-transform 0.3s;
58  }
59}
60
61@media (max-width: 600px) {
62  .burger-btn.close .bar_mid {
63    opacity: 0;
64    -webkit-transition: opacity 0.3s;
65    transition: opacity 0.3s;
66  }
67}
68
69@media (max-width: 600px) {
70  .burger-btn.close .bar_bottom {
71    -webkit-transform: translate(-50%, -8px) rotate(-45deg);
72            transform: translate(-50%, -8px) rotate(-45deg);
73    -webkit-transition: -webkit-transform 0.3s;
74    transition: -webkit-transform 0.3s;
75    transition: transform 0.3s;
76    transition: transform 0.3s, -webkit-transform 0.3s;
77  }
78}
79
80/* <====== ハンバーガーメニューを全画面表示 ======> */
81@media (max-width: 600px) {
82  .nav-menu li a {
83    color: white;
84    font-size: 1.5rem;
85  }
86}
87
88@media (max-width: 600px) {
89  .nav-snu-color {
90    color: white;
91    font-size: 2rem;
92  }
93}
94
95@media (max-width: 600px) {
96  .nav-item {
97    padding: 3rem;
98  }
99}
100
101@media (max-width: 600px) {
102  .nav-sns-list {
103    display: -webkit-box;
104    display: -webkit-flex;
105    display: -ms-flexbox;
106    display: flex;
107    -webkit-box-pack: center;
108    -webkit-justify-content: center;
109        -ms-flex-pack: center;
110            justify-content: center;
111    -webkit-box-align: center;
112    -webkit-align-items: center;
113        -ms-flex-align: center;
114            align-items: center;
115    width: 100%;
116    height: 100%;
117  }
118}
119
120@media (max-width: 600px) {
121  .nav-list {
122    display: -webkit-box;
123    display: -webkit-flex;
124    display: -ms-flexbox;
125    display: flex;
126    -webkit-box-pack: center;
127    -webkit-justify-content: center;
128        -ms-flex-pack: center;
129            justify-content: center;
130    -webkit-box-align: center;
131    -webkit-align-items: center;
132        -ms-flex-align: center;
133            align-items: center;
134    -webkit-box-orient: vertical;
135    -webkit-box-direction: normal;
136    -webkit-flex-direction: column;
137        -ms-flex-direction: column;
138            flex-direction: column;
139    width: 100%;
140    height: 100%;
141  }
142}
143
144@media (max-width: 600px) {
145  .nav-inner .nav-header-menu {
146    display: none;
147    width: 100vw;
148    height: 100vh;
149    position: fixed;
150    top: 0;
151    left: 0;
152    z-index: 2;
153  }
154}
155
156@media (max-width: 600px) {
157  .nav-inner .nav-header-menu .nav-sns-menu {
158    width: 100%;
159    height: 40%;
160    background-color: #1b1310;
161    z-index: 2;
162    display: -webkit-box;
163    display: -webkit-flex;
164    display: -ms-flexbox;
165    display: flex;
166    -webkit-box-pack: center;
167    -webkit-justify-content: center;
168        -ms-flex-pack: center;
169            justify-content: center;
170  }
171}
172
173@media (max-width: 600px) {
174  .nav-inner .nav-header-menu .nav-sns-menu ul {
175    -webkit-box-pack: center;
176    -webkit-justify-content: center;
177        -ms-flex-pack: center;
178            justify-content: center;
179  }
180}
181
182@media (max-width: 600px) {
183  .nav-menu {
184    width: 100%;
185    height: 60%;
186    background-color: #1b1310;
187    -webkit-box-orient: vertical;
188    -webkit-box-direction: normal;
189    -webkit-flex-direction: column;
190        -ms-flex-direction: column;
191            flex-direction: column;
192    z-index: 2;
193  }
194}
195
196@media (max-width: 600px) {
197  .nav-menu.nav-list {
198    display: block;
199    position: absolute;
200    top: 50%;
201    left: 50%;
202    -webkit-transform: translate(-50%, -50%);
203            transform: translate(-50%, -50%);
204    text-align: center;
205  }
206}
207
208@media (max-width: 600px) {
209  .nav-menu.nav-item {
210    margin-right: 0;
211    margin-bottom: 40px;
212  }
213}
214
215@media (max-width: 600px) {
216  body.noscroll {
217    overflow: hidden;
218  }
219}
220

js
1$(".burger-btn").on("click", function () {
2  $(".burger-btn").toggleClass("close");
3  $(".nav-header-menu").fadeToggle(500);
4  $("body").toggleClass("noscroll");
5});
6
7$("#nav-menu a[href]").on("click", function (event) {
8  $(".burger-btn").trigger("click");
9});
10