スマホ版用に設定したdisplay:noneをPC版で動作しないようにさせたい

前提・実現したいこと

幅768px以上の場合は、header-nav表示されるようにしたい

詳細

幅768px以上の時には常時header-navが表示されるように設定したいです。
何もしない場合は想定通り、header-navが表示されているのですが、
幅768px以下で、ハンバーガーメニューをクリックしてheader-navを一度表示、非表示にすると、
幅768px以上に戻しても、その動作が続いてしまい、header-navが消えてしまいます。

動作のGIFです↓
https://gyazo.com/e3949768f5f47568396e138bdb02124a

###該当のソースコード

#HTML

<header class="header">
    <div class="header-inner">
      <div class="site-title"><a href="./">Cresta Design</a></div><!-- /.site-title -->
      <nav class="header-nav">
        <ul class="nav-list">
          <li class="nav-item"><a href="!">Concept</a></li><!-- /.nav-item -->
          <li class="nav-item"><a href="!">Service</a></li><!-- /.nav-item -->
          <li class="nav-item"><a href="!">Works</a></li><!-- /.nav-item -->
          <li class="nav-item"><a href="./">Contact</a></li><!-- /.nav-item -->
        </ul><!-- /.nav-list -->
      </nav><!-- /.header-nav -->

      <button class="burger-btn">
        <span class="bar bar_top"></span>
        <span class="bar bar_mid"></span>
        <span class="bar bar_bottom"></span>
      </button><!-- /.burger-btn -->
    </div><!-- /.header-inner -->
  </header><!-- /.header -->

#CSS

/* ---header---- */

.header{
  padding: 19px 30px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  transition: .3s;
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}


.header a{
  color: #fff;
  font-style: italic;
  text-decoration: none;
  font-weight: bold;
}

.header a:hover{
  opacity:0.7;
  transition: .3s;
}

.site-title{
  font-size: 2.6rem;
}

.nav-list{
  display: flex;
}

.nav-item{
  margin-right: 30px;
}

.nav-item:last-of-type{
  margin-right: 0;
}

.burger-btn{
  display: none;
}

@media screen and (max-width:768px){
  /* ---header_sp---- */
  .header{
    padding: 30px 4vw 0;
  }
  .header-nav{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #282F35;
    height: 100vh;
    width: 100%;
  }
  .nav-list{
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
  }
  .nav-item{
    margin-bottom: 30px;
  }
  .nav-item:last-of-type{
    margin-bottom: 0;
  }

  .burger-btn{
    position: absolute;
    top: 30px;
    right: 4vw;
    display: block;
  }

  .burger-btn .bar{
    display: block;
    width: 30px;
    height: 2px;
    background-color: #fff;
  }

  .bar_top,
  .bar_mid{
    margin-bottom: 8px;
  }

.burger-btn.cross .bar_top{
  transform: rotate(45deg) translate(8px,8px);
  transition: .3s;
}

.burger-btn.cross .bar_mid{
  opacity: 0;
  transition: .3s;
}
.burger-btn.cross .bar_bottom{
  transform: rotate(-45deg) translate(8px,-8px);
  transition: .3s;
}

body.noscroll{
  overflow: hidden;
}


  button{
    background-color: transparent;
    border:none;
    cursor:pointer;
    outline:none;
    padding: 0;
    appearance: none;
    }
}

#jQuery

$('.burger-btn').on('click',function(){
  $('.header-nav').fadeToggle(300);
  $(this).toggleClass('cross');
  $('body').toggleClass('noscroll');
});

#使用している言語
HTML/CSS/jQuery

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

回答2件

matchMedia を使って、.header-nav を show するのはどうでしょうか。

MediaQueryList - Web API | MDN

投稿2021/07/24 11:42

Lhankor_Mhy

総合スコア36960

05310531ee

2021/07/26 12:37

ありがとうございます。別の方で解決しました。また次回ぜひよろしくお願いいたします。

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

ベストアンサー

fadeToggleのアニメーション後、要素にdisplay: noneが追加されている場合はdisplayプロパティを削除する形ではどうでしょうか。
2～4行目を追加しています。

js
1$('.burger-btn').on('click',function(){
2	$('.header-nav').fadeToggle(300, null, function(){
3		if($(this).css('display')==='none') $(this).css('display', '');
4	});
5	//$('.header-nav').fadeToggle(300);
6	$(this).toggleClass('cross');
7	$('body').toggleClass('noscroll');
8});