zweite Navbarzeile ab 1210Px

This commit is contained in:
2026-05-11 12:43:55 +02:00
parent c7f2288f8e
commit bbc7e7297e
2 changed files with 31 additions and 51 deletions
+29 -49
View File
@@ -93,58 +93,38 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
display: block;
}
/* CSS von https://responsivenavigation.net/examples/simple-toggle/ */
.anchor-link,
#mobile-nav { display: none; } /* Nicht im DesktopView */
@media (max-width: 48em) { /* ~768px */
/* DesktopMenü verstecken */
.nav__center { display: none; }
/* HamburgerButton sichtbar */
#mobile-nav,
.anchor-link { display: block; }
/* MobileNavListe (der “offcanvas”‑Menu) sichtbar */
.nav__mobile-menu {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #333d43;
z-index: 999; /* über allem anderen */
max-height: 0; /* verstecken */
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.nav__mobile-menu.open {
max-height: 100vh; /* 100% viewportheight */
overflow-y: auto; /* Scrollen, falls zu viele Links */
/* Responsive Anpassung ab 1210px und darunter */
@media (max-width: 1210px) {
.nav {
flex-wrap: wrap; /* zweite Nav-Zeile*/
padding: 0.5rem 1rem;
}
/* MobileLinks */
.nav__mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav__mobile-menu li {
border-bottom: 1px solid #444;
}
.nav__mobile-menu a {
display: block;
color: #fff;
padding: 1rem;
text-decoration: none;
}
/* Die “Profil / Anmelden / Registrieren”‑Buttons in einer Zeile */
.nav__right {
flex: 1;
justify-content: flex-end;
}
.nav__left {
order: 1;
flex: 1; /* Nimmt den Platz links ein */
}
.nav__right {
order: 2;
flex: 1;
justify-content: flex-end; /* schiebt Buttons nach ganz rechts */
}
.nav__center {
order: 3;
flex-basis: 100%; /* Erzwingt, dass dieses Element eine eigene Zeile einnimmt */
justify-content: center; /* Zentriert die Links in der zweiten Zeile */
padding: 0.5rem 0;
border-top: 1px solid rgba(255,255,255,0.1); /* Optionale Trennlinie */
margin-top: 0.5rem;
}
.nav__item {
margin: 0.25rem;
}
}
#mobile-nav {
display: none;
}
+1 -1
View File
@@ -8,7 +8,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
</a>
</div>
<!-- Mobile navbar mit Burger-Symbol -->
<button id="mobile-nav" class="anchor-link" aria-label="Menü öffnen">
<button id="mobile-nav" aria-label="Menü öffnen">
</button>
<!--