Eine Navigation mit zentriertem Logo umsetzen
Ab und zu sieht man eine Website, in der das Logo zentriert dargestellt wird und links und rechts davon stehen Menüpunkte. Schaut man sich dann die Lösung der Entwickler/innen an, findet man kleine und große CSS-Hacks, um diesen Effekt zu erreichen.
Da wird gerne mal ein Menüpunkt zum Logo umfunktioniert (mittels Hintergrundbild) oder das Markup der Navigation wird so manipuliert, dass es keine störenden Container mehr enthält. Beides habe ich schon gesehen und auch selbst so umgesetzt.
Doch das muss nicht sein.
Die Lösung
Mit display: contents gibt es nun eine Lösung, die fast ohne Hacks auskommt.
Die CSS-Anweisung sorgt dafür, dass sich ein Container so verhält, als gäbe es ihn gar nicht. Und wenn man die Anweisung sowohl dem NAV- als auch dem UL-Element gibt, dann erhält man Listen-Elemente, die auf einer Ebene mit anderen Elementen, wie z.B. einem Logo stehen und so per Flexbox und order neu ausgerichtet werden können.
Der einzige Hack besteht darin, dass man noch per CSS angeben muss, welche Elemente vor bzw. nach dem Logo stehen sollen. In der folgenden Demo verwende ich nth-child, um die ersten 3 Elemente vor das Logo zu verschieben.
See the Pen Untitled by Dennis Erdmann (@erdmannfreunde) on CodePen.
display: contents wird von allen modernen Browsern unterstützt, mit einer Einschränkung: Buttons funktionieren dort nicht. Aber wer nicht gerade ein Formular damit stylen möchte, sollte keine Probleme damit haben (siehe auch caniuse)