ナビゲーションが消える

Question

前提・実現したいこと

画面幅900px以下でハンバーガーメニューが表示されるように設定しています。

発生している問題・エラーメッセージ

問題は２つで、１つはハンガーメニューのaボタンを押してから、901px以上に画面幅を広げるとnav-wrapperが消えてしまい、リロードしないと再表示されないことです。
２目は、901px以上の時にaボタンを押し、リロードせずにハンバーガメニューに切り替わると、ページ内リンクはできるのですがnav-wrapperが消えなくなってしまうことです。

この問題を解消したいです。何卒よろしくお願いいたします。

該当のソースコード

	<header>
		<div class="header-inner">
			<h1><a href="">title</a></h1>
			<div class="nav-wrapper">
				<nav class="header-nav">
					<ul class="nav-ul">
						<li class="header-list"><a href="#">About</a></li>
						<li class="header-list"><a href="#work">Work</a></li>
						<li class="header-list"><a href="">Contact</a></li>
					</ul>
				</nav>
			</div>

			<div class="nav-btn">
				<span class="btn btn-top"></span>
				<span class="btn btn-mid"></span>
				<span class="btn btn-bottom"></span>
			</div>
		</div>
	</header>

body.noscroll{
  overflow: hidden;
}

header, footer{
	background-color: #1D3FA4;
	color: white;
}

header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
}

.header-list {
	font-size: 20px;
}

.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 23px 70px;
}
.nav-ul {
	width: 250px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-btn {
	display: none;
}

@media screen and (max-width:900px) {
	/* ハンバーガメニュー */
.nav-btn {
	display: block;
	width: 43px;
	height: 43px;
	position: fixed;
	z-index: 3;
	top: 31px;
	right: 22px;
	border: none;
	background-color: #1D3FA4;
	cursor: pointer;
}

.btn {
	width: 30px;
	height: 2px;
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);      
	background-color: #fff;  
	border-radius: 5px;  
}

.btn-top{   
  top: 13px;
}

.btn-mid{    
  top: 50%;
}

.btn-bottom{
  bottom: 10px;
}

.nav-btn.close .btn-top {
	transform: translate(-50%,10px) rotate(45deg);
	transition: transform .3s;
}

.nav-btn.close .btn-mid{      
  opacity: 0;       
  transition: opacity .3s;    
}   

.nav-btn.close .btn-bottom{      
transform: translate(-50%,-8px) rotate(-45deg);      
transition: transform .3s;    
}

.nav-wrapper {
	display: none;      
	width: 100vw;      
	height: 100vh;      
	position: fixed;      
	top: 0;      
	left: 0;       
	z-index: 2; 
}

.header-nav {
	width: 100%;        
  height: 100%;        
  background-color: #294BB0;        
  z-index: 2;
}

.header-nav, .nav-ul {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
}

.header-nav, .header-list {
	margin-right: 0;        
}

.header-list {
	margin: 70px 0;
	font-size: 28px;
}
}

$('.nav-btn').on('click', function () {
	$('.nav-btn').toggleClass('close');
	$('.nav-wrapper').fadeToggle(300);
	$('body').toggleClass('noscroll');
});
if( $(window).width() <= 900){
$('.header-list > a').on('click', function() {
	$('.nav-wrapper').fadeOut(300);
	$('.nav-btn').removeClass('close');
	$('body').removeClass('noscroll');
}); 
};

Answer 1

Javascriptで対処してみました。

    $('.nav-btn').on('click', function () {
        $('.nav-btn').toggleClass('close');
        $('.nav-wrapper').fadeToggle(300);
        $('body').toggleClass('noscroll');
    });
    $('.header-list > a').on('click', function() {
        // ここのif文の位置が変わっています。
        if( $(window).width() <= 900){
            $('.nav-wrapper').fadeOut(300);
            $('.nav-btn').removeClass('close');
            $('body').removeClass('noscroll');
        };
    }); 
    $(window).resize(function() {
        if( $(window).width() <= 900){
            // リサイズされて900px以下なので、ハンバーガーメニュー範囲のサイズ変更
            // メニューを開いたままウィンドウを広げたとき、メニューがＸのままになるのを防ぐ
            $('.nav-btn').removeClass('close'); 
            // ハンバーガーメニューを出すのでヘッダは隠す
            $('.nav-wrapper').hide();
        } else {
            // リサイズされて900pxを超えているで、通常ヘッダ
            $('.nav-wrapper').show();           
        }
    })

Comments

[kyonu]

初めまして！回答ありがとうございます！
提案していただいたように修正したところ、解決しました！昨日から悩んでいたので、解決策が見つかり安心しました。
ありがとうございますm(_ _)m