ハンバーガーメニューがクリック後にずれる。各ブラウザサイズに対してスムーズに移動されない。

前提・実現したいこと

ハンバーガーメニューが、クリック事に上にずれてしまう。
HTML5 CSS3 Bootstrap JavaScript を使っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
ハンバーガーメニューアイコンを上に動かない為、Media Queryを利用して、ブレークポイントを作り、position: aboslute; top: ***px; left: ***; で位置を固定しました。アイコンクリック後、アコーディオン風にメニュー項目出現する為、ヘッダーの.navbar(ヘッダー要素)には　Z-index: 999; ヘッダー下の要素にはz-index:0;をかけてます。

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

各ブレークポイントのブラウザのサイズ間で、メニューアイコンがスムーズに動いてくれない。春海ん移動してしまい、中途半端なブラウザサイズではハンバーガーアイコンが確認できないです。
position: absolute を外すと、アイコンがクリック後に上に動き、メニュー内の項目はそのしたの要素の後ろ側に出現します（隠れる）。

エラーメッセージ

該当のソースコード

index.php

<link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:480px)">
</head>
<body>
  <nav class="navbar navbar-expand-md navbar-light" style="">
    <div class="container">
      <a href="index.php" class="navbar-brand">
        <h4 class="d-inline align-middle">Joey Namiki</h4>
      </a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a href="index.php" class="nav-link active">Work</a>
          </li>
          <li class="nav-item">
            <a href="about.php" class="nav-link">About</a>
          </li>
        <li class="nav-item">
            <a href="http://joeynamiki.com/work/skills.php" class="nav-link">Skills</a>
        </li>
        <li class="nav-item">
            <a href="http://joeynamiki.com/workj/index.php" class="nav-link">JP</a>
        </li>
        </ul>
      </div><!-- </container> -->
  </nav>




  <!-- SHOWCASE-->
  <section id="showcase" class="py-5">
      <div class="container">
        <div class="row">

          <div class="col-lg-6 text-center lightUp comeOut1">
            <div class="projectImage1">
              <a href="project.php"><img src="img/image1.jpg" alt="" class="img-fluid mb-3"></a>
            </div>
            <p class="caption1">FEELGOOD.etc: Web Design</p>
          </div><!-- col-lg-6 -->

          <div class="col-lg-6 text-center lightUp comeOut2">
            <div class="projectImage2">
              <a href="project3.php"><img src="img/picture1.jpg" alt="" class="img-fluid mb-3"></a>
            </div>
            <p class="caption2">GoFind.ai: UX/UI</p>
          </div><!-- col-lg-6 -->

          <div class="col-lg-6 text-center lightUp comeOut3">
            <div class="projectImage3">
              <a href="project2.php"><img src="img/picture2.jpg" alt="" class="img-fluid mb-3"></a>
            </div>
            <p class="caption3">JRP: Brand Identity</p>
          </div><!-- col-lg-6 -->

          <div class="col-lg-6 text-center lightUp comeOut4">
            <div class="projectImage4">
              <a href="http://joeynamiki.com/resume/project3_1.php"><img src="img/image4.jpg" alt="" class="img-fluid mb-3"></a>
            </div>
            <p class="caption4">SoofStore!: Graphic Design</p>
          </div><!-- col-lg-6 -->

mobile.css

body {
  margin-top: 20px;
}
.navbar {
  opacity: 0.9;
  height: 80px;
}
.info-header {
  width: 50%;
  margin: auto;
  border-bottom: 1px #ddd solid; }

#mypassion-section .fa, #strength-section .fa {
  color: #fff;
  background: #333;
  padding: 4px;
  border-radius: 5px;
  font-size: 30px; }

#strength-section .fa {
  background: #fff;
  padding: 4px;
  border-radius: 5px;
  font-size: 30px; }


.card:hover {
     opacity: 0.9;
}
.mainPic1 {
  text-align: center;
  list-style: none;
}
.btn_position{
  display: block;
  margin: 0 auto;
}
.nextProject {
  text-align: right;
}
.question {}
.wireframe{
    list-style: none;
    float:left;
}
.wireText {
  clear: both;
}
.wireframeBox {
  /* background: #f4f4f4;
  width: 650px;
  height: 642px;
  margin: 0 auto; */
}
.intro {
  list-style: none;
}
#about .sns fa {
  font-size: 15px;
  text-align: center; }
#about .sns fa:hover {
  opacity: 0.7; }
.nonDots {
  list-style: none;
}
/* .lightUp:hover {
     opacity: 0.8;
} */
.line {
  float:left;
}
.next {
}
/* .comeOut:hover {
  background: rgba(255,255,255,0);
} */
/* .projectImage1:hover {
  opacity:0;
} */
.projectImage1 {
  position:relative;
}
.projectImage2 {
  position:relative;
}
.projectImage3 {
  position:relative;
}
.projectImage4 {
  position:relative;
}

.caption1 {
  color:#000;
  font-size: 36px;
  text-align: center;
  position: absolute;
  top: 120px;
  left:80px;
  opacity:0;
}
.caption2 {
  color:#000;
  font-size: 36px;
  text-align: center;
  position: absolute;
  top: 120px;
  left:80px;
  opacity:0;
}
.caption3 {
  color:#000;
  font-size: 36px;
  text-align: center;
  position: absolute;
  top: 120px;
  left:80px;
  opacity:0;
}
.caption4 {
  color:#000;
  font-size: 36px;
  text-align: center;
  position: absolute;
  top: 120px;
  left:80px;
  opacity:0;
}
.comeOut1 {
  width:650px;
  /* height:550px; */
}
.comeOut2 {
  width:650px;
  /* height:550px; */
}
.comeOut3 {
  width:650px;
  /* height:500px; */
}
.comeOut4 {
  width: 650px;
  /* height:500px; */
}
.sButton{
  margin-top: 20px;
}
mobile.css

@media screen and (min-width: 0px) and (max-width: 320px) {
    .navbar {
    width: 430px;
    height: 80px;
    padding-bottom: 10px;
    display: block;
    position: absolute;
    z-index: 999;
  }
  .navbar-toggler {
    position: absolute;
    top: 5px;
    left: 265px;
  }
  #navbarNav {
    background-color: white;
    opacity: 1;
    color: white;
  }
  #showcase {
    padding-top: 30px;
    z-index: 0;
  }
}/*@media 1px*/
@media screen and (min-width:321px) and ( max-width:345px) {
    .navbar {
    width: 430px;
    height: 80px;
    display: block;
    padding-bottom: 10px;
    position: absolute;
    z-index: 999;
  }
  .navbar-toggler {
    position: absolute;
    top: 5px;
    left: 265px;
  }
  #navbarNav {
    background-color: white;
    opacity: 1;
    color: white;
  }
  #showcase {
    z-index: 0;
  }

}/*@media 321px*/

@media screen and (min-width:346px) and ( max-width:480px) {
    .navbar {
    width: 430px;
    height: 80px;
    display: block;
    padding-bottom: 10px;
    position: absolute;
    z-index: 999;
  }
  .navbar-toggler {
    position: absolute;
    top: 5px;
    left: 378px;
  }
  #navbarNav {
    background-color: white;
    opacity: 1;
    color: white;
  }
  #showcase {
    z-index: 0;
  }

ソースコード


### 試したこと
ブレークポイントをメディアクエリを利用して作った
ハンバーガーアイコン、.navbar-togglerにposition: absolute, top, leftをかけて固定した
#navbarNavにbackground-color: white をかけて、クリック後のメニュー項目背景を白色に施した。

ここに問題に対して試したことを記載してください。
ブレークポイントを変えたりしました。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

こんばんは。

ハンバーガーメニューが、クリック事に上にずれてしまう。

現象か確認できませんでした。
おそらく、ご提示いただいていない部分のコードに原因があるのだと思います。

各ブレークポイントのブラウザのサイズ間で、メニューアイコンがスムーズに動いてくれない。春海ん移動してしまい、中途半端なブラウザサイズではハンバーガーアイコンが確認できないです。

こういうことでしょうか？

css
1  @media screen and (min-width: 0px) and (max-width: 320px) {
2      .navbar {
3      /*width: 430px;*/
4      width: 100%;
5      height: 80px;
6      padding-bottom: 10px;
7      display: block;
8      position: absolute;
9      z-index: 999;
10    }
11    .navbar-toggler {
12      position: absolute;
13      top: 5px;
14      /*left: 265px;*/
15      right: 0;
16    }
17    #navbarNav {
18      background-color: white;
19      opacity: 1;
20      color: white;
21    }
22    #showcase {
23      padding-top: 30px;
24      z-index: 0;
25    }
26  }/*@media 1px*/
27  @media screen and (min-width:321px) and ( max-width:345px) {
28      .navbar {
29      /*width: 430px;*/
30      width: 100%;
31      height: 80px;
32      display: block;
33      padding-bottom: 10px;
34      position: absolute;
35      z-index: 999;
36    }
37    .navbar-toggler {
38      position: absolute;
39      top: 5px;
40      /*left: 265px;*/
41      right: 0;
42    }
43    #navbarNav {
44      background-color: white;
45      opacity: 1;
46      color: white;
47    }
48    #showcase {
49      z-index: 0;
50    }
51  
52  }/*@media 321px*/
53  
54  @media screen and (min-width:346px) and ( max-width:480px) {
55      .navbar {
56      /*width: 430px;*/
57      width: 100%;
58      height: 80px;
59      display: block;
60      padding-bottom: 10px;
61      position: absolute;
62      z-index: 999;
63    }
64    .navbar-toggler {
65      position: absolute;
66      top: 5px;
67      /*left: 378px;*/
68      right: 0;
69    }