DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Fix: Menüpunkte in der Kopfzeile brachen bei mittleren Bildschirmbreiten um

Browse Source 
"Über die Kreative" (und potenziell andere Menüpunkte) konnte bei
mittleren Fensterbreiten (zwischen ca. 860-1100px) in eine zweite Zeile
umbrechen — durch die kürzlich vergrößerte Kopfzeile plus den neuen
Installieren-Button wurde es dort schlicht zu eng für die Hauptnavi.

Fix: white-space:nowrap auf den Menüpunkten (bricht nie mehr um) +
den Umschaltpunkt zum Hamburger-Menü von 860px auf 1100px angehoben,
damit auf mittleren Breiten gar nicht erst versucht wird, alles
nebeneinander reinzuquetschen, sondern rechtzeitig auf das kompakte
Menü umgeschaltet wird. Geprüft: bei 1100px sauberer Wechsel zum
Hamburger-Menü, kein Umbruch und kein horizontaler Überlauf mehr bei
1150-1600px.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 01:43:59 +02:00
co-authored by Claude Sonnet 5
parent 1b55604cba
commit 7720396be2
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+3 -2
View File
@@ -248,10 +248,11 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
} }
.brand img { border-radius: 50%; } .brand img { border-radius: 50%; }
.main-nav { display: flex; gap: 1.7rem; } .main-nav { display: flex; gap: 1.7rem; flex-shrink: 0; }
.main-nav a { .main-nav a {
font-size: 1.02rem; font-size: 1.02rem;
color: var(--c-text-muted); color: var(--c-text-muted);
white-space: nowrap;
transition: color 0.2s var(--ease); transition: color 0.2s var(--ease);
} }
.main-nav a:hover { color: var(--c-accent); } .main-nav a:hover { color: var(--c-accent); }
@@ -320,7 +321,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
color: var(--c-accent); color: var(--c-accent);
} }
@media (max-width: 860px) { @media (max-width: 1100px) {
.main-nav { display: none; } .main-nav { display: none; }
.hamburger { display: inline-block; } .hamburger { display: inline-block; }
} }