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>
これは機能しています。フルページをクリックしてみてください。 –