
前提
参考書をもとにハンバーガーメニューを作りましたが、画像のように半分に切れてしまったり四角い囲みが表示されたりします。四角い囲みを消して、ハンバーガーメニュー全体を表示させたいです。
該当のソースコード
html5
1<body> 2 <header class="header"> 3 <h1 class="header-logo"><img src="./img/logo.svg" alt="東京サファリパーク" width="280"></h1> 4 <button type="button" id="header-btn" class="header-btn" title="メニュー開閉"><span></span></button> 5 <nav class="header-gnav"> 6 <ul class="header-gnav-list"> 7 <li><a href="#"><span class="material-icons header-gnav-animals">pets</span>動物紹介</a></li> 8 <li><a href="#"><span class="material-icons header-gnav-guide">explore</span>パークガイド</a></li> 9 <li><a href="#"><span class="material-icons header-gnav-ticket">confirmation_number</span>料金・チケット</a></li> 10 <li><a href="#"><span class="material-icons header-gnav-access">commute</span>交通アクセス</a></li> 11 </ul> 12 </nav> 13 </header> 14 <!-- /.header --> 15</body>
css3
1.header { 2 display: flex; 3 justify-content: space-between; 4 align-items: center; 5 margin: 0 auto; 6 padding: 12px 16px; 7 position: fixed; 8 left: 0; 9 top: 0; 10 z-index: 1000; 11 max-width: 1200px; 12 width: 100%; 13 background-color: #fff; 14} 15 16@media screen and (min-width: 768px) { 17 .header { 18 position: static; 19 flex-direction: column; 20 } 21} 22 23@media screen and (min-width: 992px) { 24 .header { 25 flex-direction: row; 26 } 27} 28 29.header-logo { 30 line-height: 1; 31} 32 33@media screen and (max-width: 575px) { 34 .header-logo { 35 width: 250px; 36 } 37} 38 39.header-btn { 40 width: 32px; 41 height: 20px; 42 padding-right: 5px; 43 background: none; 44 display: block; 45 z-index: 500; 46} 47 48.header-btn span { 49 position: relative; 50 display: block; 51 height: 2px; 52 background: #333; 53 transition: all .3s; 54} 55 56.header-btn span::before, .header-btn span::after { 57 position: absolute; 58 left: 0; 59 content: ""; 60 display: block; 61 width: 100%; 62 height: 2px; 63 background: #333; 64 transition: all .3s; 65} 66 67.header-btn span::before { 68 top: -10px; 69} 70 71.header-btn span::after { 72 bottom: -10px; 73} 74 75@media screen and (min-width: 768px) { 76 .header-btn { 77 display: none; 78 } 79} 80 81.header-gnav { 82 margin-top: 62px; 83 width: 100%; 84 height: 100vh; 85 position: absolute; 86 top: 0; 87 right: -100%; 88 transition: all .5s; 89 background-color: #fff; 90} 91 92@media screen and (min-width: 768px) { 93 .header-gnav { 94 margin-top: 0; 95 width: auto; 96 height: auto; 97 position: static; 98 } 99} 100 101.header-gnav-list { 102 border-top: 1px solid #efe1c5; 103 list-style: none; 104 105} 106 107.header-gnav-list a { 108 display: flex; 109 font-weight: bold; 110 align-items: center; 111 padding: 8px 24px; 112 font-size: 18px; 113 border-bottom: 1px solid #efe1c5; 114 text-decoration: none; 115} 116 117.header-gnav-list a span { 118 font-size: 22px; 119 color: #459209; 120 margin-right: 8px; 121} 122 123.header-gnav-list a span.header-gnav-access { 124 font-size: 24px; 125} 126 127@media screen and (min-width: 768px) { 128 .header-gnav-list { 129 display: flex; 130 border: none; 131 } 132 .header-gnav-list a { 133 border: none; 134 margin-left: 16px; 135 padding: 5px; 136 } 137} 138 139.is-openMenu .header-btn span { 140 background: transparent; 141} 142 143.is-openMenu .header-btn span::before { 144 top: 0; 145 transform: rotate(45deg); 146} 147 148.is-openMenu .header-btn span::after { 149 top: 0; 150 transform: rotate(-45deg); 151} 152 153.is-openMenu .header-gnav { 154 right: 0; 155}
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。

四角い枠というのは、buttonにデフォルトでついているborderなので、buttonに対してborder:none;を当ててあげることで消すことができます
回答1件
あなたの回答
tips
プレビュー