Navbar responsive

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

Sascha01

Neues Mitglied
14 Februar 2020
2
0
1
19
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;
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.615
314
83
67
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.
 

Sascha01

Neues Mitglied
14 Februar 2020
2
0
1
19
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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.615
314
83
67
Dann müsstest Du eher min-width so festlegen, dass die Navi in horizontaler Anordnung hinein passt.
Oder mit white-space:nowrap das Umbrechen unterbinden.
In beiden Fällen wird der Benutzer dann gezwungen, zu scrollen, wenn das Fenster zu schmal ist.
 
Werbung: