HTML/CSS: Bestimmtes <li> nur collapsed menu zeigen?
"Startseite" verschwindet in der mobilen Ansicht aus dem Header und ist dann nur noch in der ausgeklappten Menü-Version verfügbar.
Ich möchte jetzt allerdings ein Element (ähnlich wie "Startseite") haben, das NUR in der collapsed-Version sichtbar ist. Könnt ihr mir da helfen?
1 Antwort
Gib dem Listitem eine zusätzliche Klasse:
<li class="menu-item menu-item--mobile-only"
Innerhalb des CSS-Teils deiner Webanwendung kannst du anschließend eine passende Regel innerhalb eines Media Queries formulieren, welche ab einer Mindestbreite des Bildschirms/Browserfensters das Element ausblendet.
@media only screen and (min-width: 376px) {
.menu-item--mobile-only {
display: none;
}
}
Ab wie viel Pixeln der Umbruch zwischen Mobile- und Desktopansicht bei dir stattfindet, müsstest du selbst einmal nachschauen oder (via Device Emulator in den Webentwicklungstools) testen. Ich habe ihn im obigen Beispiel einfach auf 376px gesetzt.