ハンバーガーメニューの三本線が真ん中に来ません
ハンバーガーメニューをヘッダーにつけたいのですが、検証ツールで見ると、三本目の線に謎の余白があります。
html
1``` <header class="header"> 2 <div class="header-logo-menu flex space-between"> 3 <div class="logo-area flex space-between"> 4 <img src="images/logo.png" alt="Café&Deli Timeロゴ"> 5 <a class="shop-name" href="index.html">Café&Deli Time</p> 6 <a href="tel:072-965-5506"><span class="pc-p">072-965-5506</span></a> 7 </div> 8 <!-- ここからnavi --> 9 <!-- ハンバーガーメニューの表示 --> 10 <nav class="hamburger"> 11 <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> 12 <div id="gnav-content"> 13 <ul class="gnav-menu"> 14 <li><a href="index.html">トップ→</a></li> 15 <li><a href="#about">私たちについて→</a></li> 16 <li><a href="#news">お知らせ→</a></li> 17 <li><a href="#menu">メニュー<span class="pc-p">・</span><br class="sp-br">テイクアウト→</a></li> 18 <li><a href="#access">アクセス→</a></li> 19 </ul> 20 </div> 21 </div> 22 </nav> 23 <!-- ここまでがナビ --> 24 </div> 25 </header> 26
css
1@charset "UTF-8"; 2/* 全ページ共通 */ 3body{ 4 font-family: 'Noto Serif JP','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Arial','MS 明朝', 'MS Mincho',sans-serif; 5 margin: 0px; 6 padding: 0px; 7 font-size: 62.5%; 8 color: #733426; 9} 10 11img{ 12 max-width: 100%; 13 height: auto; 14} 15.flex{ 16 display: flex; 17} 18 19.space-between{ 20 justify-content: space-between; 21} 22 23 24/* headerのスタイル */ 25 26header { 27 position: fixed; 28 top: 0; 29 left: 0; 30 z-index: 200; 31 width: 100%; 32 padding: 0 7.5% ; 33 transition: all .5s; 34 background-color: rgba(0, 0, 0, 0); 35} 36@media screen and (max-width: 744px) { 37 header{ 38 padding: 0; 39 } 40} 41 42 43.header.change-color { 44 background-color:#f2e4d8; 45} 46 47 48.header-logo-menu{ 49 padding: 20px; 50} 51 52.logo-area{ 53 align-items: center; 54} 55 56.logo-area img{ 57display: inline-block; 58} 59 60.logo-area a{ 61 margin-left: 20px ; 62} 63@media screen and (max-width: 1024px) { 64 .logo-area a{ 65 font-size: 3.6em; 66 } 67} 68 69 70 71.logo-area a:last-of-type{ 72 font-size: 4.8em; 73} 74.shop-name{ 75 font-family: 'Damion', cursive; 76 font-size: 6em; 77 display: inline-block; 78} 79 80@media screen and (max-width: 750px) { 81 .shop-name{ 82 font-size: 3em; 83 } 84} 85 86/* ハンバーガーメニュー */ 87 88.gnav-toggle { 89 position: relative; 90 width: 50px; 91} 92 93 94/* チェックボックスなどを非表示にする */ 95 96.gnav-hidden { 97 display: none; 98} 99 100.gnav-open { 101 display: inline-block; 102 width: 50px; 103 vertical-align: top; 104} 105 106 107/* ハンバーガーの三本線 */ 108 109#gnav-open span, #gnav-open span::before, #gnav-open span::after { 110 content: ''; 111 position: absolute; 112 height: 5px; 113 /* 線の太さ */ 114 width: 50px; 115 /* 線の長さ */ 116 border-radius: 5px; 117 background: #733426; 118 display: block; 119 cursor: pointer; 120} 121 122 123/* 真ん中の線 */ 124 125#gnav-open span::before { 126 127 bottom: -20px; 128} 129 130 131/* 下の線 */ 132 133#gnav-open span::after { 134 bottom: -40px; 135 } 136 137 138/* 閉じる */ 139 140#gnav-close { 141 display: none; 142 position: fixed; 143 z-index: 90; 144 top: 0; 145 left: 0; 146 width: 100%; 147 height: 100%; 148 background: #000; 149 opacity: 0; 150 transition: 0.3s ease-in-out; 151} 152 153 154/* チェックが付いたら表示させる */ 155 156#gnav-input:checked~#gnav-close { 157 display: block; 158 opacity: 0.5; 159} 160 161#gnav-input:checked~#gnav-content { 162 transform: translateX(0%); 163 box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15); 164} 165 166#gnav-content { 167 overflow: auto; 168 position: fixed; 169 top: 0; 170 left: 0; 171 z-index: 300; 172 width: 70%; 173 height: 100%; 174 background: #F2E4D8; 175 transition: 0.3s ease-in-out; 176 transform: translateX(-105%); 177 /* 画面外側に隠す */ 178} 179 180.gnav-menu { 181 margin-top: 100px; 182 font-size: 30px; 183 display: flex; 184 flex-direction: column; 185 gap: 22px; 186 align-items: center; 187 text-transform: uppercase; 188 /* 大文字小文字の混在を大文字に統一する */ 189} 190
回答1件
あなたの回答
tips
プレビュー