ハンバーガーメニュー　表示位置

### 前提

ここに質問の内容を詳しく書いてください。
jqueryにて　ハンバーガーメニューを作成しているのですがレスポンシブ対応をしたくて
スマホサイズのブレークポイントを@media screen and (max-width:480px)に設定したのですが
ヘッダー部分から見切れてしまいます。

ヘッダー部分にハンバーガーメニューを載せたいです

実現したいこと

ここに実現したいことを箇条書きで書いてください。
ヘッダー部分にハンバーガーメニューを載せたいです

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ハンバーガーメニュー</title> <link rel="stylesheet" href="reset.css" /> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1 class="heading"> SHOGO<span> NAKAMURA</span> </h1>

<nav>
  <ul class="list_nav_header">
    <li>
      <a href="#profile">Profile</a>
    </li>
    <li>
      <a href="#im-skill">Skill</a>
    </li>
    <li>
      <a href="#contact">Contact</a>
    </li>
    <li class="Twitter">
      <a href="https://twitter.com/8K0zwoxb0m93r1q">
        <img src="img/Twitter.png">
      </a>
    </li>
  </ul>





</nav>
<div class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

<nav class="globalMenuSp">
    <ul>
        <li><a href="#profile">Profile</a></li>
        <li><a href="#im-skill">Skill</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
</nav>

</header> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script> $(function() { $('.hamburger').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } }); }); $('a[href^="#"]').click(function () { var speed = 400; var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({ scrollTop: position }, speed, 'swing'); return false; }); </script>

@media screen and (min-width:480px){
header{
width: 100%;
height: 100px;
background-color: #000000;
}
header h1{
width: 100%;
font-size: 30px;
color: white;
float: left;
position: relative;
right: 5px;
}
span{
display: block;
}

.list_nav_header {
display: flex;
align-items: center;
gap: 40px;
font-family:Arial Black;
display: none;
}

.Twitter img{
width: 50px;
height: 50px;
border-radius:50%;

}

main {
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
}

.burger img{
border-radius: 30px;
}

.burger:hover {
background-color: #ddd;
}
.burger.is-active {
background-image: url(img/close.svg);
}

.menu {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 20vh;
background-color: #000;
position: fixed;
top: 0;
left: 0;
z-index: 2;
display: none;
}
.menu_header{
align-items: center;
gap: 40px;
font-family:Arial Black;
}

.hamburger {
display : block;
position: fixed;
z-index : 3;
right : 13px;
top : 12px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
margin-top: 15px;
}
.hamburger span {
display: inline-block;
font-size: 0;
position: fixed;
left: 15px;
background : #FFFFFF;
-webkit-transition: 0.5s ease-in-out;
-moz-transition : 0.5s ease-in-out;
transition : 0.5s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top : 16px;
left: 6px;
-webkit-transform: rotate(315deg);
-moz-transform : rotate(315deg);
transform : rotate(315deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 16px;
-webkit-transform: rotate(-315deg);
-moz-transform : rotate(-315deg);
transform : rotate(-315deg);
}

nav.globalMenuSp {
position: fixed;
z-index : 2;
top : 0;
left : 0;
color: #000;
background: #fff;
text-align: center;
transform: translateX(100%);
transition: all 0.6s;
width: 100%;
}

nav.globalMenuSp ul {
background-image: url(img/IMG_4666.JPG);
margin: 0 auto;
padding: 0;
width: 100%;
}

nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
border-bottom: 1px solid #fff;
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
border-bottom: none;
}
nav.globalMenuSp ul li:hover{
background :#ddd;
}

nav.globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1em 0;
text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
transform: translateX(0%);
}

}

ソースコード

試したこと

min-width:480pxに変更かけたり
display: inline;に変更

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

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

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

回答1件

.hamburger spanにwidthとheightを持たせるだけで最低限動くようになりました

追加

css
1.hamburger span　{
2  height: 4px;
3  width: 30px;
4}

投稿2022/08/05 23:17

Aranika_roty

総合スコア14

あなたの回答

tips

プレビュー

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

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

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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