Navigation Größe ändern <html/CSS>?

Hallo,

ich will gerade ein Navigation bauen und habe mir mit dieser Seite geholfen.

Mein Problem ist, dass wenn ich das Fenster auf den halben Bildschirm minimiere, dass der ganzen Bereich oben abgedeckt ist, aber wenn ich es auf volle Größe mache, dann ist die Navigation klein. Siehe:

Ich hätte es mit min-width und max-width versucht.

(habe den Code kopiert - im Chrome getestet)

code

Danke im voraus.

Comments

[HermCrafter]

Soll sich die Navigation immer über die gesamte Bildschirmbreite erstrecken?

[crRaphi]

Ja, ich habe aber links neben der Navigation ein Logo und rechts einen Button.

Answer 1

[medmonk]

Bei solchen Fragen solltest Du immer Deinen Quellcode mitangeben, mindestens als Snippet via Code-Tag, besser noch über Plattformen wie JSFiddle oder Codepen. Wir müssen schon sehen, wie Dein Markup aussieht und welche Formatierungen darauf angewendet wurden. Ohne diese Informationen kann man Dir nicht sinnvoll helfen.

HTML:

<nav class="navbar d-flex">
 <!-- logo -->
 <a href="#">
  <img src="logo.png alt="logo"/>
 </a>

 <!-- nav -->
 <ul class="nav d-flex">
  <li class="nav__item">
   <a class="nav__link" href="#">Item 1</a>
  </li>
  <li class="nav__item">
   <a class="nav__link" href="#">Item 2</a>
  </li>
 </ul>

 <!-- toggle/btn -->
 <button class="btn btn--darkmode">
  <img src="path/icon.png" alt="" />
 </button>
</nav>

CSS:

*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* helper classes */
.d-flex {
  display: flex;
  gap: var(--gap, 1rem);
}

/* primary styles */
.navbar {
  --navbar-height: 4rem;
  width: 100%;
  height: var(--navbar-height);
  align-items: center;
  border-bottom: 1px solid hsl(195 0% 0% / 0.5);
}

.nav {
  width: 100%;
  align-items: center;
  list-style: none;
}

.nav__item {
  background-color: hsl(195 0% 100% / 0);
  transition: all 350ms ease;
}

.nav__item:hover {
  background-color: hsl(195 0% 100% / 0.3);
}

.nav__link {
  text-decoration: none;
  line-height: var(--navbar-height);
  color: #000;
  padding: 0 1.25rem;
  transition: all 350ms ease;
}

.nav__link:hover {
  text-decoration: underline;
}

.btn {
  border: none;
  border-radius: 5px;
}

.btn--darkmode {
  width: 3.125rem;
  height: 3.125rem;
}

.logo {
  width: 3.125rem;
  height: 3.125rem;
}

LG medmonk

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Comments

[crRaphi]

Ich habe es ergänzt.

[medmonk]

@crRaphi

Markup und CSS sind vorsichtig ausgedrückt Murks. Einerseits nichts valide, falsch ausgezeichnet (Stichwort: Semantik) und im CSS befinden sich unnötig lange Verkettungen von Selektoren. Gib mir ein paar Minuten, dann "schubs" ich dir alles zurecht.

[crRaphi]

@medmonk

Danke

[medmonk]

@crRaphi

Ich habe jetzt alle falschen und unnötigen Elemente rausgeschmissen, ich denke das sollte als Grundlage so weit ausreichen. Falls es Fragen dazu gibt, einfach nochmal nachhaken.

LG medmonk