zweite Navbarzeile ab 1210Px
This commit is contained in:
+30
-50
@@ -93,58 +93,38 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CSS von https://responsivenavigation.net/examples/simple-toggle/ */
|
/* Responsive Anpassung ab 1210px und darunter */
|
||||||
.anchor-link,
|
@media (max-width: 1210px) {
|
||||||
#mobile-nav { display: none; } /* Nicht im Desktop‑View */
|
.nav {
|
||||||
|
flex-wrap: wrap; /* zweite Nav-Zeile*/
|
||||||
@media (max-width: 48em) { /* ~768px */
|
padding: 0.5rem 1rem;
|
||||||
/* Desktop‑Menü verstecken */
|
|
||||||
.nav__center { display: none; }
|
|
||||||
|
|
||||||
/* Hamburger‑Button sichtbar */
|
|
||||||
#mobile-nav,
|
|
||||||
.anchor-link { display: block; }
|
|
||||||
|
|
||||||
/* Mobile‑Nav‑Liste (der “off‑canvas”‑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% viewport‑height */
|
|
||||||
overflow-y: auto; /* Scrollen, falls zu viele Links */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile‑Links */
|
|
||||||
.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 {
|
.nav__left {
|
||||||
flex: 1;
|
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
@@ -8,7 +8,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<!-- Mobile navbar mit Burger-Symbol -->
|
<!-- 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>
|
</button>
|
||||||
<!--
|
<!--
|
||||||
|
|||||||
Reference in New Issue
Block a user