タイトル通り「display: none」を指定しているにも関わらず、以下の画像の赤丸で囲った部分のようにFontAwesomeのメニューアイコンが消えずに困っています。
これはProgateのレスポンシブデザインの演習で扱った物で、本来はPCで見た時は「display: none」で非表示にして、スマホで見た時に「display: block」で表示する、といったものです。
しかし、それがローカルでFontAwesomeを4から5に変えた途端にこのように「display: none」が効かなくなってしまいました。
そこを変えた事と、それに伴ったclass名の変更以外はコードは全くいじっていないのですが、何が原因でしょうか?
ちなみに「visibility : hidden」を指定しても結果は同じでした。
どなたかご教授お願いいたします。
HTML
1 <header> 2 <div class="container"> 3 <div class="header-left"> 4 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 5 </div> 6 <i class="fas fa-bars"></i> 7 <div class="header-right"> 8 <a href="#">レッスン</a> 9 <a href="#">新規登録</a> 10 <a href="#" class="login">ログイン</a> 11 </div> 12 </div> 13 </header>
CSS
1header { 2 height: 65px; 3 width: 100%; 4 background-color: rgba(34, 49, 52, 0.9); 5 position :fixed; 6 top: 0; 7 z-index: 10; 8} 9 10.logo { 11 width: 124px; 12 margin-top: 20px; 13} 14 15.header-left { 16 float: left; 17} 18 19.header-right { 20 float: right; 21 margin-right: -25px; 22} 23 24.header-right a { 25 line-height: 65px; 26 padding: 0 25px; 27 color: white; 28 display: block; 29 float: left; 30 transition: all 0.5s; 31} 32 33.header-right a:hover { 34 background-color: rgba(255, 255, 255, 0.3); 35} 36 37.fas { 38 color: white; 39 float: right; 40 font-size: 25px; 41 padding: 21px 0; 42 display: none; 43}
css
1/* スマホ向けレイアウト */ 2@media all and (max-width: 670px) { 3 .lesson { 4 width: 100%; 5 } 6 7 .btn { 8 width: 100%; 9 } 10 11 .facebook { 12 margin-bottom: 10px; 13 } 14 15 .top-wrapper { 16 text-align: left; 17 } 18 19 20 .header-right { 21 display: none; 22 } 23 24 25 .fas { 26 display: block; 27 } 28 29 .top-wrapper h1 { 30 font-size: 24px; 31 } 32 33 .top-wrapper p { 34 font-size: 14px; 35 } 36}
回答3件
あなたの回答
tips
プレビュー