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

Navbar responsive

Sascha01

Neues Mitglied
Hallo, hab mir eine kleine navbar erstellt und möchte diese auch bischen responsive machen.
Bisher passt alles aber wen ich die window size bis zu einem punkt kleiner mache, klappt es in sich zu sammen.
Btw ja ich weiß mein code ist nicht strukturiert
Bild in full size :
Bild mit fehler:
HTML:
<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Startseite</title>
    <link rel="stylesheet" href="G:css\style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap" rel="stylesheet">
  </head>
  <body>
<header>
  <img  class="logo" src="G:logo.png"
<li><a class="bild" <a href="shop.html">Shop</a></li>
  <nav>


    <ul class="navlinks">

      <li><a href="G:\WTF\html\barcode.html">Barcode Scanner</a></li>
      <li><a href="G:\WTF\html\firewall.html">Firewall</a></li>
      <li><a href="G:\WTF\html\about.html">Über das Projekt</a></li>
    </ul>
  </nav>
    <a class="cta" href="#"><button>Kontakt</button></a>

</header>

  <h1>Abschlußprojekt über Lagerlogistik<h1>
  <h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..<br><br><br><br><br><br><br><br><br><br><br><br><br><br></h2>







  </body>
</html>

CSS:
Code:
* {
  box-sizing: border-box;
  margin:0px;
  padding:0px;
  background-color:#2f3037;
}

li,a,button, .bild
{
font-family:'Montserrat', sans-serif;
font-weight:800px;
font-size: 21px;
color:#edf0f1;
text-decoration: none;
list-style: none;
}
  h1
{
    font-family:'Montserrat', sans-serif;
    font-size: 24px;
    color:#edf0f1;
    padding: 30px 5%;
}

h2
{
  border:1px transperent;
  border-radius: 14px;
  font-family:'Montserrat', sans-serif;
  font-size: 18px;
  color:#edf0f1;
  padding: 10px 8%;
  padding-right: 10px;
  padding-left: 10px;
  margin-left: 120px;
  margin-right: 120px;


  background-color:#3b3c45;

}

header
{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 5%;
}

img
{
  margin-right: auto;
  max-width: 80px;
  max-height: 60px;
}

.navlinks li
{
  list-style: none;
  display: inline-block;
  padding:0px 20px;
}
.bild
{
  margin-right: auto;
  list-style:none;
  color: #66cc99;
}
button
{
  padding: 9px 25px;
  border:none;
}
 
Werbung:
Das klappt zusammen, weil bei einem schmalen Browserfenster kein Platz ist, um die Elemente nebeneinander darzustellen.
Ein bewährtes Verfahren, dieses Problem zu lösen ist, bei schmalem Fenster mit einer Mediaquery auf ein Hamburger-Menü mit vertikaler Anordnung umzuschalten, das zunächst verborgen ist und sich beim Klick auf das Hamburger-Symbol öffnet.
kann ich nicht mit irgwas die max width oder so festlegen so wie bei einem bild?
 
Zurück
Oben