レスポンシブでwidthが768px以下のときに.navbar_toggleをdisplay: block;
にしているのですが、表示されません。
試しに、このdisplay: block;を削除すると、もちろんpc版の時は表示されるのですが、なぜなのか768px以下になると表示されず、消えます。
コードは以下の通りです。⇓
html
1 <!-- header --> 2 <header> 3 <div class="header-in"> 4 <img src="../img/logo/logo.png" height="39" alt=""> 5 <nav> 6 <div class="navbar_toggle"> 7 <span class="navbar_toggle_icon"></span> 8 <span class="navbar_toggle_icon"></span> 9 <span class="navbar_toggle_icon"></span> 10 </div> 11 <div class="menu"> 12 <ul> 13 <li><a href="#card" class="card-top red active">Card</a></li> 14 <li><a href="#news" class="news-top red">News</a></li> 15 <li><a href="#price" class="price-top red">Price</a></li> 16 <li><a href="#access" class="access-top red">Access</a></li> 17 <li><a href="#contact" class="contact-top red">Contact</a></li> 18 </ul> 19 </div> 20 </nav> 21 </div> 22 </header> 23
scss
1// header 2header { 3 @include tekiou2($haikei); 4 position: fixed; 5 top: 0; 6 left: 0; 7 width: 100%; 8 z-index: 10; 9 font-family: "Lato", sans-serif; 10} 11 12.header-in { 13 max-width: 1200px; 14 padding: 40px 0; 15 display: flex; 16 justify-content: space-between; 17 align-items: center; 18 margin: 0 10vw; 19 position: relative; 20} 21 22ul { 23 display: flex; 24 list-style: none; 25 padding: 0; 26} 27 28li { 29 padding-left: 30px; 30 &:first-of-type { 31 padding: 0; 32 } 33 a { 34 @include tekiou($white); 35 font-size: 1.6rem; 36 } 37} 38 39//drawer 40 41.navbar_toggle { 42 display: none; 43 position: absolute; 44 top: 50%; 45 right: 30px; 46 transform: translateY(-50%); 47 .navbar_toggle_icon { 48 display: block; 49 height: 2px; 50 width: 30px; 51 background-color: #fff; 52 &:nth-child(2) { 53 margin: 10px 0; 54 } 55 } 56} 57 58.navbar_toggle_icon.open { 59 &:nth-child(1) { 60 transform: rotate(45deg); 61 } 62 &:nth-child(2) { 63 display: none; 64 } 65 &:nth-child(3) { 66 transform: rotate(-45deg); 67 } 68} 69
レスポンシブ⇓
scss
1@media screen and (max-width: 768px) { 2 3 // drawer 4 .navbar_toggle { 5 display: block; 6 } 7 ・・・ 8
ご回答いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/17 09:55