レスポンシブデザインのトグルボタンが表示されない。

Webページ制作の勉強中にどうしても解決法がわからない問題にあたりました。というのも、トグルボタンをレスポンシブ対応させていこうとしたところ、z-indexを指定してもアイコンが表示されなくなってしまったのです。
問題の箇所は以下のCSSの107行目です。
navがレスポンシブ対応していないことがわかりました。なぜ対応してないのか全く分かりません。

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
.max-width{
  width: 1300px;
  padding: 0 80px;
  margin: auto;
}

/* navber style */
.navbar{
  position: fixed;
  width: 100%;
  padding: 30px 0;
  font-family: "Ubuntu", sans-serif;
  transition: all 0.3s ease;
}
.navbar.sticky{
  padding: 15px 0;
  background: crimson;
}
.navbar .max-width{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .logo a{
  font-size: 35px;
  font-weight: 600;
  color: white;
}
.navbar .logo a span{
  color: crimson;
  transition: all 0.3s ease;
}
.navbar.sticky .logo a span{
  font-size: 35px;
  font-weight: 600;
  color: white;
}
.navbar .menu li{
  display: inline-block;
  list-style: none;
}
.navbar .menu li a{
  color: white;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}
.navbar .menu li a:hover{
  color: crimson;
}
.navbar.sticky .menu li a:hover{
  color: white;
}

/* menu button style */
.menu-btn{
  color: white;
  font-size: 23px;
  cursor: pointer;
  display: none;
}

/* home style */
.home{
  display: flex;
  background: url("img/black.jpg") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  color: white;
  min-height: 500px;
  font-family: "Ubuntu", sans-serif;
}
.home .max-width{
  margin: auto 0 auto 40px;
}
.home .home-content .text-1{
  font-size: 27px;
}
.home .home-content .text-2{
  font-size: 75px;
  font-weight: 600;
  margin-left: -3px;
}
.home .home-content .text-3{
  font-size: 40px;
  margin: 0 5px;
}
.home .home-content .text-3 span{
  color: crimson;
  font-weight: 500;
}

/* responsive media query style */
@media (max-width: 947px){
  .max-width{
    padding: 0 50px;
  }
  .menu-btn{
    display: block;
    z-index: 999;
  }
  .navbar .menu{
    background: black;
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    padding-top: 80px;
  }
  .navbar .menu li{
    display: block;
  }
  .navbar .menu li a{
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
  }
}

レスポンス対応のメニューにアイコンを表示させるにはどうすれば良いのでしょうか。何卒ご教授お願い致します。

以下HTMLとJSです。

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portfolio1</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/ff832bf6f3.js" crossorigin="anonymous"></script>
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <!-- Navigate section start -->
    <nav class="navbar">
      <div class="max-width">
        <div class="logo"><a href="#">Portfo<span>lio.</span></a></div>
        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <div class="menu-btn">
          <i class="fas fa-bars"></i>
        </div>
      </div>
    </nav>
    <!-- Home section start -->
    <section class="home" id="home">
      <div class="max-width">
        <div class="home-content">
          <div class="text-1">Hello, my name is</div>
          <div class="text-2">Ogino Kaito</div>
          <div class="text-3">I'm a <span>Student</span></div>
        </div>
      </div>
    </section>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <script src="main.js"></script>
  </body>
</html>

$(document).ready(function(){
  $(window).scroll(function(){
    if(this.scrollY > 20){
      $(".navbar").addClass("sticky")
    }else{
      $(".navbar").removeClass("sticky")
    }
  })
});

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

回答1件

原因は下記の部分でしょう。

html
1    <nav class="navbar">
2      <div class="max-width">
3
4        /* 中略 */
5
6        <div class="menu-btn">
7          <i class="fas fa-bars"></i>
8        </div>
9      </div>
10    </nav>

css
1.max-width{
2  width: 1300px;
3  padding: 0 80px;
4  margin: auto;
5}

幅を 1300px に固定しているので menu-btn が画面外に出て見えなくなってます。

下記に修正すれば画面内に収まり見えるようになります。

css
1.max-width{
2  max-width: 1300px;
3  padding: 0 80px;
4  margin: auto;
5}

投稿2021/02/28 06:40

hatena19

総合スコア34073

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

レスポンシブデザインのトグルボタンが表示されない。

関連した質問