Responsiveでハンバーガーメニューが一瞬表示されてしまう

前提

サイト検証のページでDimentionsをResponsiveにしてサイズを可変した際に、一瞬ハンバーガーメニューの中身が表示されてしまうのですが、解決方法をご教授いただけないでしょうか？
Google検索やこのサイトでも検索してみたのですが、解決方法が見つからず、、、。
お力をお貸しいただけますと幸いです。よろしくお願いいたします。

該当のソースコード

HTML

<header> <div class="hamburger"> <span></span> <span></span> <span></span> </div> <nav class="globalMenuSp"> <a href="index.html"><img class="top-icon" src="assets/picture/top/top_icon.png" alt="home"></a> <ul> <li> <a href="index.html">HOME</a> </li> <li> <a href="works.html">WORKS</a> </li> <li> <a href="about.html">ABOUT</a> </li> <li> <a href="#footer">CONTACT</a> </li> </ul> </nav> </header>

CSS

/*　ハンバーガーボタン　*/ .hamburger { display: block; position: fixed; z-index: 3; right: 15px; top: 12px; width: 42px; height: 42px; cursor: pointer; text-align: center; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; transition: 0.5s all; } .hamburger span { display: block; position: absolute; width: 30px; height: 2px; left: 6px; background: #F16E8C; } .hamburger span:nth-child(1) { top: 10px; } .hamburger span:nth-child(2) { top: 20px; } .hamburger span:nth-child(3) { top: 30px; } /* ナビ開いてる時のボタン */ .hamburger.active { -webkit-transform: rotate(360deg); transform: rotate(360deg); } .hamburger.active span:nth-child(1) { top: 16px; left: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .hamburger.active span:nth-child(2) { top: 16px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .hamburger.active span:nth-child(3) { opacity: 0; } .top-icon { display: block; width: 180px; margin: 80px auto 0; } header nav { padding-right: inherit; } nav.globalMenuSp { position: fixed; z-index: 2; top: 0; left: 0; color: #FFFDF1; background: #FFFDF1; text-align: center; transform: translateX(100%); transition: all 0.6s; width: 100%; height: 100%; } nav.globalMenuSp ul { background: #FFFDF1; margin: 38px auto 0; padding: 0; width: 100%; text-align: center; } nav.globalMenuSp ul li { list-style-type: none; padding: 0; width: 100%; border-bottom: 1px solid #FFFDF1; } nav.globalMenuSp ul li:last-child { padding-bottom: 0; border-bottom: none; } nav.globalMenuSp ul li a { display: block; color: #3d1616; text-decoration: none; padding-bottom: 20px; font-size: 2.0rem; font-weight: 600; } /* このクラスを、jQueryで付与・削除する */ nav.globalMenuSp.active { transform: translateX(0%); }

JavaScript

$(function() { $('.hamburger, .globalMenuSp li').click(function() { $('.hamburger').toggleClass('active'); if ($('.hamburger').hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } });});