メディア間違った要素を問い合わせていますか？

画面が670ピクセル以下になると、#logo要素が消えるようにしようとしています。それは、ロゴが消えるという点では機能しますが、なんらかの理由でロゴが表示されます。なぜ私のnav ulは消えていますか？メディア間違った要素を問い合わせていますか？

コード：

header { 
 
    position: fixed; 
 
    background-image: url(img/grey-bg.jpg); 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 8%; 
 
    min-height: 50px; 
 
    z-index: 2; 
 
} 
 
header nav ul { 
 
    position: relative; 
 
    margin-top: -28px; 
 
    margin-right: 5%; 
 
    z-index: 3; 
 
} 
 
header li { 
 
    font-size: 1rem; 
 
    font-family: 'Cabin Sketch', cursive; 
 
    float: right; 
 
    color: #fff; 
 
    padding-right: 30px; 
 
    z-index: 3; 
 
} 
 
#logo { 
 
    height: 75%; 
 
    margin-top: 5px; 
 
    margin-left: 10%; 
 
} 
 
@media screen and (max-width: 670px) { 
 
    #logo { 
 
    display: none; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Jovial Entertainment | Home</title> 
 
    <link href="main.css" type="text/css" rel="stylesheet"/> 
 
    <link href='https://fonts.googleapis.com/css?family=Cabin+Sketch'rel='stylesheet' type='text/css'> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
    <header> 
 
     <a href="#"><img src="img/JOVIAL-LOGO-TEXT.png" id="logo"/></a> 
 
     <nav> 
 
     <ul> 
 
      <li>VIDEOS</li> 
 
      <li>ABOUT</li> 
 
      <li>PHOTOS</li> 
 
      <li>CONTACT</li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    </body> 
 
</html>

出典

2016-08-19 Corona15

あなたはdisplay: noneにそれを変更したため、これ以上のページにありませんが、それゆえ、それはかつてのスペースを取ることは何もありませんので、あなたのnavはロゴがあった場所に移動しています。代わりにvisibility: hiddenを試してください。

出典

2016-08-19 06:01:15 cjl750

ありがとうございました！その笑顔でナースを運転していた – Corona15

ナビゲーションにマイナスのマージンがあるため、ロゴを削除するとナビゲーションが画面の上に表示されます。メディアクエリでは、ナビゲーションの最上部をゼロに設定する必要があります。

出典

2016-08-19 06:03:40

メディア間違った要素を問い合わせていますか？

答えて

関連する問題