Hallo,
ich würde gerne die Kategorie Leiste 2 Spaltig haben. Kann mir bitte jemand sagen wie ich das anstelle?
Beispiel hier: https://www.otto.de/
Vielen Dank
GRüße
Meinst du 2-spaltig oder 2-zeilig?!
ähh 2 zeilig. sorry. habe mich falsch ausgedrückt 
Dieses CSS sollte auch für mehrere Zeile funktionieren
@media screen and (min-width: 48em) {
.navigation-main .navigation--entry {
float:left;
}
}
Wie soll das ganze dann im Responsive-Context aussehen? Dreizeilig werden?
Wie soll das ganze dann im Responsive-Context aussehen? Dreizeilig werden?
Ich würde mal schätzen Einspaltig mit vielen Zeilen 
Hi, danke für eure Antworten. So wie im Beispiel von otto.de
@grevo Responisve != Mobiltelefon 
Da gibt es noch einiges dazwischen…
Ich würde ja auch eher zu einer sinnvolleren Struktur raten. Aber wer’s wünscht kann es ruhig auch mehrzeilig umsetzen.
Meine obige simple CSS Lösung funktioniert aber nicht mit dem erweiterten Menü.
@grevo und genau das sollte so sein. Am besten die Navi 2 zeilig und mittig mit dem erweitertem Menue
Das würde mich auch brennend interessieren. Aber in Verbindung mit dem erweiterten Menü. Also dass rechts bei mehreren Hauptkategorien nicht der Schiebepfeil erscheint, sondern dass es eine Zeile drunter weitergeht. Manche sehen den Schiebepfeil nicht gleich und denken da kommen keine weiteren Kategorien mehr.
Wir nutzen die Plugins “Erweitertes Menü”, “Sticky Menü” und “Teaserbilder für alle Kategorien” kombiniert.
Wenn man da was ändert, müsste man evtl. die anderen Plugins wie z.B. Sticky auch so machen oder?
Viele Grüße
Matthias
Ich würde für die reine Desktopnavigation ein eigenes Plugin schreiben, dass Dir die Navigation wie gewüscht baut. Dann diese mit CSS media-queries nur bei Desktops anzeigen und sonst das Standardmenü.
Damit das ganze mit dem Erweiterten Menü funktioniert einfach zu dem CSS Code welches die Mehrzeiligkeit macht
@media screen and (min-width: 48em) {
.navigation-main .navigation--entry {
float:left;
}
}
zusätzlich die Höhe des Erweiterten Menü mit jQuery aktualisieren
$(".navigation--entry").hover(function(){
var offset = $(this).position();
var newtop = offset.top + $(this).outerHeight(true);
$(".advanced-menu").css("top",newtop);
});
Allerdings finde ich die Lösung nicht ganz optimal, da dabei das erweiterte Menü die untenstehenden Menüeinträge verdeckt.