ハンバーガーメニューの三本線が真ん中に来ません
ハンバーガーメニューをヘッダーにつけたいのですが、検証ツールで見ると、三本目の線に謎の余白があります。
html
``` <header class="header"> <div class="header-logo-menu flex space-between"> <div class="logo-area flex space-between"> <img src="images/logo.png" alt="Café&Deli Timeロゴ"> <a class="shop-name" href="index.html">Café&Deli Time</p> <a href="tel:072-965-5506"><span class="pc-p">072-965-5506</span></a> </div> <!-- ここからnavi --> <!-- ハンバーガーメニューの表示 --> <nav class="hamburger"> <div class="gnav-toggle"> <input id="gnav-input" type="checkbox" class="gnav-hidden"> <label id="gnav-open" for="gnav-input"><span></span></label> <label class="gnav-unshown" id="g-nav-close" for="g-nav-input"></label> <div id="gnav-content"> <ul class="gnav-menu"> <li><a href="index.html">トップ→</a></li> <li><a href="#about">私たちについて→</a></li> <li><a href="#news">お知らせ→</a></li> <li><a href="#menu">メニュー<span class="pc-p">・</span><br class="sp-br">テイクアウト→</a></li> <li><a href="#access">アクセス→</a></li> </ul> </div> </div> </nav> <!-- ここまでがナビ --> </div> </header>
css
@charset "UTF-8"; /* 全ページ共通 */ body{ font-family: 'Noto Serif JP','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Arial','MS 明朝', 'MS Mincho',sans-serif; margin: 0px; padding: 0px; font-size: 62.5%; color: #733426; } img{ max-width: 100%; height: auto; } .flex{ display: flex; } .space-between{ justify-content: space-between; } /* headerのスタイル */ header { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; padding: 0 7.5% ; transition: all .5s; background-color: rgba(0, 0, 0, 0); } @media screen and (max-width: 744px) { header{ padding: 0; } } .header.change-color { background-color:#f2e4d8; } .header-logo-menu{ padding: 20px; } .logo-area{ align-items: center; } .logo-area img{ display: inline-block; } .logo-area a{ margin-left: 20px ; } @media screen and (max-width: 1024px) { .logo-area a{ font-size: 3.6em; } } .logo-area a:last-of-type{ font-size: 4.8em; } .shop-name{ font-family: 'Damion', cursive; font-size: 6em; display: inline-block; } @media screen and (max-width: 750px) { .shop-name{ font-size: 3em; } } /* ハンバーガーメニュー */ .gnav-toggle { position: relative; width: 50px; } /* チェックボックスなどを非表示にする */ .gnav-hidden { display: none; } .gnav-open { display: inline-block; width: 50px; vertical-align: top; } /* ハンバーガーの三本線 */ #gnav-open span, #gnav-open span::before, #gnav-open span::after { content: ''; position: absolute; height: 5px; /* 線の太さ */ width: 50px; /* 線の長さ */ border-radius: 5px; background: #733426; display: block; cursor: pointer; } /* 真ん中の線 */ #gnav-open span::before { bottom: -20px; } /* 下の線 */ #gnav-open span::after { bottom: -40px; } /* 閉じる */ #gnav-close { display: none; position: fixed; z-index: 90; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: 0.3s ease-in-out; } /* チェックが付いたら表示させる */ #gnav-input:checked~#gnav-close { display: block; opacity: 0.5; } #gnav-input:checked~#gnav-content { transform: translateX(0%); box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15); } #gnav-content { overflow: auto; position: fixed; top: 0; left: 0; z-index: 300; width: 70%; height: 100%; background: #F2E4D8; transition: 0.3s ease-in-out; transform: translateX(-105%); /* 画面外側に隠す */ } .gnav-menu { margin-top: 100px; font-size: 30px; display: flex; flex-direction: column; gap: 22px; align-items: center; text-transform: uppercase; /* 大文字小文字の混在を大文字に統一する */ }
まだ回答がついていません
会員登録して回答してみよう