display: contents — wenn sich ein Container unsichtbar machen soll

Eine typische Header-Anforderung: Auf kleinen Bildschirmen soll das Logo mittig stehen, links und rechts davon jeweils drei Menüpunkte als Icons. Auf großen Bildschirmen soll das Logo linksbündig stehen und alle Menüpunkte (nicht als Icons) rechts daneben.

Der klassische Workaround dafür: den Startseitenpunkt als Logo gestalten (Hintergrundbild setzen, Text verstecken) und das Logo per Flexbox und order an die richtige Stelle schieben. Das funktioniert, ist aber keine schöne Lösung. Zwei oder mehr Navigationsmodule in Contao zu verwenden ist ebenfalls ungünstig.

Die Lösung

Mit display: contents sagst du einem Container, dass er sich so verhalten soll, als wäre er gar nicht da. Wendest du das sowohl auf das nav- als auch auf das ul-Element an, kannst du die Reihenfolge der Menüpunkte frei wählen — das Logo bleibt ein eigenes Element, und ein einziges Navigationsmodul reicht aus.

Wie das konkret aussieht, zeigt die Demo: Navigation mit zentriertem Logo