Navigationsleiste verschiebt sich nach unten beim kleiner machen des Browsers

[MagicMike]

Hallo zusammen,

ich bin neu in Html und CSS und bin auf ein Problem gestossen wo ich nicht mehr weiter komme. Wenn ich den Browser kleiner mache verschiebt sich meine Navigationsleiste mit den Menü Punkten nach unten. Wie kann ich das beheben. Ich möchte erst das diese leiste ab einer Breite von 900px verschwindet.

hier noch mein Code vom Css.

*{

  margin: 0;
  padding: 0;


}

header{

  width: 100%;
  height: 100vh;
  background: url(header.jpg) no-repeat 50% 50%;

  background-size: cover;
  background-attachment: fixed;
}


@font-face {
  font-family: Marienthal;
  src: url(Marienthal.ttf);
}


   .logo{


      top: 7%;
      left: 50%;
      transform: translate(-50%, -50%);
     position: fixed;
     text-decoration: none;
     font-size: 70px;
     color: white;
     font-family: Marienthal, sans-serif;
  
  
    }

nav{
position: fixed;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-around;


}
  
nav.black {
background: rgb(94, 91, 91);

}
nav ul {

  list-style: none;
  transition: 2s;
  top: 28%;
  left: 52%;
  transform: translate(-50%, -50%);
position: absolute;
text-decoration: none;
justify-content: space-around;
}

nav ul li{

  display: inline;
  padding: 20px;
  letter-spacing: 3px;

}

  .burger div{

    width: 30px;
    height: 3px;
    margin: 5px;
    background-color: white;
    float: right;
  

  }

  nav ul li a{

    text-decoration: none;
    color: white;
    font-size: 23px;
    font-family: Oswald, sans-serif;


  }

Und hier noch der Code vom Header bereich

  <header>
          <nav>
           
              <div class="logo"  ><p>Linnik</p>
              </div>
             
              <ul>
              <li><a href="#portfolio">Portfolio</a></li>
              <li style="margin-right: 200px;"><a href="#preise">Preise</a></li>
                <li><a href="#reservieren">Reservieren</a></li>
                <li><a href="#">Impressum</a></li>
            </ul>
       
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>


          </nav>
        </header>

 

[Gelöschtes Mitglied 36401]

google -> css navigation responsive

Ungefähr 14.500.000 Ergebnisse

 

[basti1012]

Du solltest dein CSS nochmal komplett neu.
Ich habe deinen Code so getestet wie du ihn gepostet hast, da kommt nur Quark raus.
Deine halbe CSS hat überhaupt keine Funktion.

Falls du mit FlexBox arbeiten willst, solltest du auf feste Position verzichten.
Gerade bei so ein Menü brauchst du das fast gar nicht (außer fixed nav).

Du solltest bei den Elementen wo du FlexBox nutzen willst auch display:flex; benutzen.
FlexBox wird meines Wissens nach nicht vererbt, sonst könnte man den Body als Vererber nehmen.

Du könntest ja mal ein komplettes Beispiel erstellen mit Original Bildern, dann kann man dir noch mehr helfen.

An besten erst eine Navigation erstellen wie es im Handy aussehen soll.
Wenn du das hast baust du das Responsive ein für Desktop Geräte.