Media Query targetting falsches Element?

Ich versuche, mein #logo Element verschwinden zu lassen, sobald der Bildschirm kleiner als 670px wird. Es funktioniert, dass das Logo verschwindet, aber es nimmt meine Navigation aus irgendeinem Grund. Warum verschwindet mein Nav?Media Query targetting falsches Element?

Der Code:

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>

Quelle

2016-08-19 Corona15

Weil Sie es display: none geändert, es ist nicht, dass es auf der Seite nicht mehr, deshalb gibt es nichts, um den Raum zu nehmen, wo es einmal war , also bewegt sich dein Navigationsgerät dorthin, wo das Logo war. Versuchen Sie stattdessen visibility: hidden.

Quelle

2016-08-19 06:01:15 cjl750

Danke! Hat mich über das haha verrückt gemacht – Corona15

Sie haben eine negative Marge in Ihrer Navigation, sobald Sie das Logo entfernen, geht Ihre Navigation einfach über den oberen Bildschirmrand. Sie müssen den oberen Rand der Navigation in Ihrer Medienabfrage auf Null setzen.

Quelle

2016-08-19 06:03:40

Media Query targetting falsches Element?

Antwort

Verwandte Themen