Fix: Nav-Bar überlief bei ~1400px (durch vorherige Änderung verursacht)
Der Wechsel auf justify-content:flex-start + größere Gaps + horizontales Button-Padding hat die nötige Content-Breite über den 1180px-Container- Deckel getrieben (bei 1400px Viewport 1523px vs. 1180px verfügbar). Behoben: eigener, breiterer .nav-bar-Container (1180px -> 1400px, nur für den Header, .container für den restlichen Seiteninhalt bleibt unverändert bei 1180px), fester statt viewport-wachsender Bewerben-Gap, Button-Padding von .8rem auf .55rem reduziert, Hamburger-Schwelle auf 1480px angehoben. Vor dem Commit bei mehreren Breiten numerisch (scrollWidth vs. clientWidth) UND per Screenshot verifiziert.
This commit is contained in:
+16
-13
@@ -109,7 +109,11 @@ header.site-header {
|
|||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
.nav-bar {
|
.nav-bar {
|
||||||
width: min(1180px, 92vw);
|
/* Eigene, etwas breitere Kappung als .container (1180px) — die Nav
|
||||||
|
braucht durch größere Schrift + mehr Abstand + Polarlicht-Padding
|
||||||
|
spürbar mehr Platz, ohne dass der restliche Seiteninhalt breiter
|
||||||
|
werden soll. */
|
||||||
|
width: min(1400px, 94vw);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -119,7 +123,7 @@ header.site-header {
|
|||||||
Menü mit festem Abstand direkt ans Logo heran, der übrige Platz
|
Menü mit festem Abstand direkt ans Logo heran, der übrige Platz
|
||||||
bleibt rechts nach dem Bewerben-Knopf. */
|
bleibt rechts nach dem Bewerben-Knopf. */
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
gap: clamp(2rem, 5vw, 4.5rem);
|
gap: 2rem;
|
||||||
padding: .9rem 0;
|
padding: .9rem 0;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
@@ -173,7 +177,7 @@ header.site-header {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: .3rem;
|
gap: .3rem;
|
||||||
padding: .5rem .8rem;
|
padding: .5rem .55rem;
|
||||||
transition: color .2s ease;
|
transition: color .2s ease;
|
||||||
}
|
}
|
||||||
.nav-group > button:hover, .nav-group.open > button { color: var(--accent); }
|
.nav-group > button:hover, .nav-group.open > button { color: var(--accent); }
|
||||||
@@ -184,7 +188,7 @@ header.site-header {
|
|||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.14rem;
|
font-size: 1.14rem;
|
||||||
padding: .5rem .8rem;
|
padding: .5rem .55rem;
|
||||||
transition: color .2s ease;
|
transition: color .2s ease;
|
||||||
}
|
}
|
||||||
.nav-flat:hover, .nav-flat.active { color: var(--accent); }
|
.nav-flat:hover, .nav-flat.active { color: var(--accent); }
|
||||||
@@ -649,15 +653,14 @@ header.site-header {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Schwelle von 880px auf 1320px angehoben: nach der Vergrößerung von
|
/* Schwelle von ursprünglich 880px auf 1480px angehoben: nach mehreren
|
||||||
Logo/Nav-Schrift/Sprachschalter/Bewerben-Button (02.08.2026) passte die
|
Vergrößerungsrunden (Logo/Nav-Schrift/Sprachschalter/Bewerben-Button,
|
||||||
Desktop-Nav bei mittleren Laptop-Breiten nicht mehr in eine Zeile —
|
mehr Abstand zwischen den Nav-Punkten, größerer eigener Nav-Container,
|
||||||
Sprachschalter/Bewerben verschwanden sichtbar aus der Leiste. Beim
|
Polarlicht-Padding je Kategorie) braucht die Desktop-Nav deutlich mehr
|
||||||
Tagescheck-Selbstaudit gefunden und behoben. Zusätzlich der Abstand
|
Platz als früher. Live bei mehreren Breiten nachgeprüft (siehe Commits
|
||||||
zwischen den Nav-Punkten (.nav-links gap) vergrößert, da "Start" und
|
vom 02.08.2026) — Schwelle hier bewusst großzügig, damit nie wieder
|
||||||
"Manager" zu eng aneinander wirkten — Schwelle deshalb nochmal leicht
|
Elemente sichtbar aus der Leiste verschwinden. */
|
||||||
angehoben, um genug Platz für den größeren Abstand zu behalten. */
|
@media (max-width: 1480px) {
|
||||||
@media (max-width: 1320px) {
|
|
||||||
.nav-toggle { display: block; }
|
.nav-toggle { display: block; }
|
||||||
.nav-links {
|
.nav-links {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
Reference in New Issue
Block a user