2016-10-27 17 views
0

メニューアイコンに問題があります。私のデスクトップのCSSについては、私は誰も表示しないように設定されています。 1000ピクセル以下では、表示ブロックとして設定しています。今のところアイコンはすべてのデバイスに表示されています。いかなる援助も感謝します。メニューアイコンが消えない

/* blah blah blah */ 
 

 
.icon-dropdown { 
 
\t display: none; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    .icon-dropdown { 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 80%; 
 
\t top: 50px; 
 
\t } 
 
\t .icon-dropdown div{ 
 
\t display: block; 
 
\t background-color: black; 
 
\t width: 35px; 
 
\t height: 4px; 
 
\t margin-bottom: 3px; \t 
 
\t position: relative; 
 
    } 
 

 

 

 

 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Vintage McDonald's</title> 
 
\t <meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <link rel="icon" type="image/jpg" href="mcdonaldsoldlogo.png"> 
 
</head> 
 
<body> 
 
<div class="wrapper"> 
 
\t <header> 
 
\t \t <a href="index.html"><img src="vintagelogo.jpg" width="90px" height="90px"></a> 
 
\t \t <h1>Vintage McDonald's!</h1> 
 
\t \t <div class="icon-dropdown"> 
 
\t \t \t <div></div> 
 
\t \t \t <div></div> 
 
\t \t \t <div></div> 
 
\t \t </div> 
 
\t </header> 
 
\t <span class="menu-trigger">Menu</span> 
 
\t <nav> 
 
\t \t <ul> 
 
\t \t \t <li><a href="about.html">ABOUT MCDONALD'S</a></li> 
 
\t \t \t <li><a href="classics.html">OUR CLASSICS</a></li> 
 
\t \t \t <li><a href="contact.html">CONTACT</a></li> 
 
\t \t </ul> 
 
\t </nav> 
 
\t <div class="slideShow"> 
 
\t <img class="placeHolder" src="1.jpg"> 
 
\t \t <div class="layer1"></div> 
 
\t \t <div class="layer2"></div> 
 
\t \t <div class="layer3"></div> 
 
\t \t <div class="slideOverlay"><p>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</p> 
 
\t \t </div> 
 
</div> 
 
</div> 
 
<script src="jquery-3.1.1.min.js"></script> 
 
<script src="menu.js"></script> 
 
</body> 
 
</html>

+1

これは機能しています。フルページをクリックしてみてください。 –

答えて

1

このメディアクエリを使用してみてください:、効果を確認するには、ブラウザを縮小しようとするその後

@media (max-width: 800px) { 
    .icon-dropdown { 
     display: block; 
     position: absolute; 
     left: 80%; 
     top: 50px; 
    } 
    .icon-dropdown div{ 
     display: block; 
     background-color: black; 
     width: 35px; 
     height: 4px; 
     margin-bottom: 3px; 
     position: relative; 
    } 

} 

を。

0

アイコンの幅と高さを設定してみてください。

関連する問題