画面幅変更時に要素が表示されるのを解決したい

実現したいこと

画面幅767pxまではハンバーガーボタンを押すとメニューが表示され、768px以上ではメニューが非表示になるようにしたい。

発生している問題・分からないこと

画面幅767pxと768pxの間でハンバーガーメニューが一瞬表示されてしまう。
768pxから767pxに下げたときにこの現象が見られる。767pxから768pxにしたときには再現出来なかった。

エラーメッセージ

error

1エラーメッセージは特になし

該当のソースコード

HTML

1<header class="header container"> 2 <h1 class="header-logo"><a class="header-logo-link" href="#"><img src="images/header/header_logo.png" alt=""></a></h1> 3 <button type="button" class="hamburger-btn flex"> 4 <span class="hamburger-btn-bar"></span> 5 <span class="hamburger-btn-bar"></span> 6 <span class="hamburger-btn-bar"></span> 7 </button> 8 <div class="hamburger-menu"> 9 <nav class="hamburger-nav"> 10 <ul class="hamburger-nav-list flex"> 11 <li>コース案内</li> 12 <li>特色</li> 13 <li>講師紹介</li> 14 <li>料金プラン</li> 15 <li>よくあるご質問</li> 16 </ul> 17 </nav> 18 <a class="free-trial-btn">無料で体験する<i class="bi bi-arrow-right-short"></i></a> 19 <ul class="hamburger-sns flex"> 20 <li class="instagram"><a href="#"><i class="bi bi-instagram"></i></a></li> 21 <li class="youtube"><a href="#"><i class="bi bi-youtube"></i></a></li> 22 <li class="facebook"><a href="#"><i class="bi bi-facebook"></i></a></li> 23 <li class="twitter"><a href="#"><i class="bi bi-twitter"></i></a></li> 24 </ul> 25 </div> 26 </header> 27

CSS

1.container {2 overflow: hidden;3}4 5.flex {6 display: flex;7}8 9.header {10 position: fixed;11 z-index: 100;12 background-color: #0079f2;13 width: 37.4rem;14 height: 66px;15 border-radius: 3.3rem;16 display: flex;17 align-items: center;18 justify-content: space-between;19 padding-left: 3.1rem;20 padding-right: 3.2rem;21 top: 8px;22 margin-left: .8rem;23 margin-right: .8rem;24}25 26@media screen and (min-width:768px) {27 .header {28 width: 99vw;29 height: 80px;30 border-radius: 4rem;31 top: 16px;32 padding-left: 3.9rem;33 padding-right: 4.2rem;34 }35}36 37h1.header-logo {38 line-height: 0;39 width: 160px;40}41 42@media screen and (min-width:768px) {43 h1.header-logo {44 width: 195px;45 }46}47 48@media screen and (max-width:767px) {49 .hamburger-menu {50 width: 37.4rem;51 height: 52.3rem;52 background-color: #0079f2;53 border-radius: 3.2rem;54 opacity: 0;55 visibility: hidden;56 transition: all .6s;57 position: fixed;58 top: 9rem;59 text-align: center;60 left: .8rem;61 right: .8rem;62 padding: 4.6rem 4.8rem 4.7rem;63 }64}65 66.hamburger-menu-active {67 opacity: 1;68 visibility: visible;69}70 71.hamburger-btn {72 flex-direction: column;73 gap: 5px;74 z-index: 999;75}76 77@media screen and (min-width:768px) {78 .hamburger-btn {79 display: none;80 }81}82 83.hamburger-btn-bar {84 background-color: #fff;85 width: 24px;86 height: 2px;87}88 89@media screen and (max-width:767px) {90 .hamburger-nav {91 margin-bottom: 4rem;92 }93}94 95@media screen and (min-width:768px) {96 .hamburger-nav {97 width: 49.2rem;98 }99}100 101.hamburger-nav-list {102 justify-content: space-between;103}104 105@media screen and (max-width:767px) {106 .hamburger-nav-list {107 flex-direction: column;108 height: 24.8rem;109 }110}111 112@media screen and (min-width:768px) {113 .hamburger-nav-list {114 padding-bottom: .3rem;115 }116}117 118@media screen and (min-width:768px) {119 .header .free-trial-btn {120 display: none;121 }122}123 124.hamburger-sns {125 justify-content: space-between;126 margin-top: 4.7rem;127 margin-left: 1.25rem;128 width: 25rem;129}130 131.hamburger-sns li a {132 color: #fff;133 font-size: 3.3rem;134 line-height: 1;135}136 137@media screen and (min-width:768px) {138 .hamburger-sns {139 display: none;140 }141}142

JavaScript

1var hamburger = $('.hamburger-menu');2$('.hamburger-btn').on('click', function () {3 console.log('click');4 hamburger.toggleClass('hamburger-menu-active');5});6 7$(window).on('resize', function () {8 console.log('resize');9 hamburger.removeClass('hamburger-menu-active');10});

試したこと・調べたこと

上記の詳細・結果

メディアクエリの画面幅の値を変更してみたのですが修正できませんでした。初歩的なところで躓いてしまいお恥ずかしいのですが、なにか解決策をご教授いただけますと幸いです。

補足

特になし