ハンバーガーメニューが適用されない

Question

ハンバーガーメニューが適用されません
スマホサイズでみると、headerが細くなり、ハンバーガーメニューの三本線が出てきません・・・

  <!-- header -->
  <header class="header" id="header">
    <div class="header-inner"> 
      <nav class="header-nav">
        <ul class="nav-list">
          <li class="nav-item"><a href="#fv">top</a></li>
          <li class="nav-item"><a href="#design">design</a></li>
          <li class="nav-item"><a href="#about">about</a></li>
          <li class="nav-item"><a href="#skills">skills</a></li>
        </ul>
      </nav>
      <button class="burger-btn">
        <span class="bar bar_top"></span>
        <span class="bar bar_mid"></span>
        <span class="bar bar_bottom"></span>
      </button>
    </div>
    </header>
  <!-- //header -->

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

  .burger-btn{
    display: block;
    position: absolute;
    top: 30px;
    right: 4vw;
  }
  .burger-btn .bar{
    display: block;
    height: 3px;
    width: 30px;
    background-color: #fff;
    transition: .3s;
  }
  .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;
  }

//ハンバーガーメニュー
$('.burger-btn').on('click',function(){
  $('.header-nav').fadeToggle(300);
  $(this).toggleClass('cross');
  $('body').toggleClass('noscroll');
});

Comments

[Lhankor_Mhy]

試してみましたが、「ハンバーガーメニューの三本線が出てきません」という問題が再現しませんでした。

Answer 1

・html でハンバーガーメニューのjavascriptを呼び出す前に下記のjqueryを呼び出していますか？

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

・.headerへ高さの指定が無いから三本線が表示されないだけでは？

.header{
    padding: 30px 4vw 0;
    height: 50px;
  }

---

上記で解決しなければ質問を追記されたほうが良いと思います

ハンバーガーメニューが適用されません

スマホサイズでみると、headerが細くなり、ハンバーガーメニューの三本線が出てきません・・・

情報量が少なすぎます
・適用されないとは？クリックしても反応がない？
・ブラウザでF12押したときにConsoleにエラーでる？
・パソコンサイズだと細くならないの？
・パソコンサイズだと三本線でるの？

極めつけは
どうなったら正解の記述がないことです

せめて、「三本線が隠れないようにしてクリックするとリストが出るようにするにはどうしたらいいでしょうか？」これくらいは書きましょう

Comments

[_arukuneko]

jinba様
回答ありがとうございました！heightが抜けていただけでした。
詳細を記述するよう気をつけます。ありがとうございました！