Breakpoint für Offcanvas-Navigation

Shopware 6 (German) Allgemein
1

War hier schon öfter Thema, wurde aber noch nicht abschließend gelöst.
Standardmäßig bricht die Navigation bei 992px (lg) und zeigt dann statt der Offcanvas-Navigation die Main-Navigation.
Jetzt möchte ich aber, dass die Navigation erst ab 1200px (xl) bricht.
Wo genau setze ich hier an? Was ist der sicherste/einfachste Weg?

2

Also spontan würde ich sagen, die CSS-Klasse für die Offcanvas anpassen, statt d-lg-none dann d-xl-none, für die .main-navigation musst Du anscheinend im CSS die Anweisung von 992 auf 1200 ändern oder gleich auf die CSS-Klassen wie beim Offcanvas ändern (bin mir nicht sicher, warum das nicht generell auch über die Klassen gelöst wurde).

1 „Gefällt mir“
3

das interessiert mich auch danke :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1:

4

Der Tipp mit den CSS-Klassen war der Durchbruch! Perfekt. So geht es.

Zum Nachbauen:
In der Datei header.html.twig im Block „layout_header_search“ die Klasse „d-lg-none“ austauschen durch „d-xl-none“.
<div class="col-sm-auto d-none d-sm-block d-xl-none">

Zusätzlich noch per CSS dafür sorgen, dass die Main-Navigation erst ab 1200px Breite eingeblendet wird.

@media (max-width: 1199px) {
    .main-navigation {
        display: none;
    }
}

@media (min-width: 1200px) {
    .main-navigation {
        display: inherit;
    }
}

Jetzt bricht die Navigation erst ab 1200px und nicht wie im Standard bei 992px.
Wenn die Navigation noch später brechen soll, kann man z. B. auch „xxl“ in der CSS-Klasse verwenden (d-xxl-none). Dann müssen natürlich auch entsprechend die Media queries angepasst werden.

5

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.