Navigationsleiste verschiebt sich nach unten beim kleiner machen des Browsers

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

MagicMike

Neues Mitglied
28 November 2020
6
0
1
31
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.

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
HTML:
  <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>
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.520
166
63
Minden
sebastian1012.bplaced.net
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.