Folgende Problemstellung:
Mobile Navigationsdarstellung in Tirol. Es soll sich die Reihenfolge der Navigationselemente im Vergleich zur Desktopvariante ändern. Desweiteren soll beim Klick auf die Lupe die Volltextsuche unter der Navigation ausklappen und die volle Bildschirmbreite benutzen. Die Navigation ist hierbei eine „ul“, die einzelnen Navigationselemente „li“s.
Weisst man dem Suchformular hier nun width:100% zu, so bezieht sich dies auf das Listenelement darüber und die Suche hängt unmotiviert in der Mitte des Screens unter der Lupe.
Lösung:
Der „ul“ wird „display:flex“ zugewiesen. Allen „li“s werden eventuell vorhandene „position“ Anweisungen genommen und es wird für die Positionierung der „li“s im css ein „order“ tag zugewiesen (order:1 order:2 etc.). Es ist darauf zu achten ,dass auch wirklich ALLE „li“s einen solchen order tag erhalten. Dann werden die Listenelemente in aufsteigender Reihenfolge anhand ihrer Order-Tags angeordnet, hat ein Element keine Order Anweisung, wird es automatisch an den anfang der Liste gestellt.
Nun kann dem Formular unter dem „li“ width:100% zugewiesen werden und es bezieht sich tatsächlich auf die „ul“.
Umgesetzt so unter tirol.at.
Smarter arbeiten, schneller finden, besser pflegen: Das neue Update der imx.Platform Produktfamilie bringt eine ganze…
Brixen, belebt, Beton, besonders, Brennerbasistunnel, beeindruckend, Begegnungen, begeisternd. Oh wie schön war das DestinationCamp 2026…
Vier Jahre - so lange ist die letzte imx.Conference als inspirative Fachveranstaltung für Touristiker*innen im…
Dieses Jahr wurde es wieder einmal Zeit, eine Smashing Conference zu besuchen, diesmal in der…
"Wir sind dann nächste Woche auf der SmashingCon. Sollen wir jemandem was aus Amsterdam mitbringen,…
Gelebtes Anwenderforum Das imx.Platform Lab ist mehr als ein weiterer Termin in Ihrem Kalender. Es…