# Breakpoint für Offcanvas-Navigation
**URL:** https://forum.shopware.com/t/breakpoint-fuer-offcanvas-navigation/105092
**Category:** Allgemein
**Created:** [5. September 2024 um 10:51 UTC](https://forum.shopware.com/t/breakpoint-fuer-offcanvas-navigation/105092 "2024-09-05T10:51:02Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@carpinus](https://forum.shopware.com/u/carpinus)
#### Post date: [5. September 2024 um 10:51 UTC](https://forum.shopware.com/t/breakpoint-fuer-offcanvas-navigation/105092/1 "2024-09-05T10:51:02Z")
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?
---
### Author:  [@Anotherone](https://forum.shopware.com/u/Anotherone)
#### Post date: [5. September 2024 um 17:21 UTC](https://forum.shopware.com/t/breakpoint-fuer-offcanvas-navigation/105092/2 "2024-09-05T17:21:10Z")
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).
---
### Author:  [@DannyBO](https://forum.shopware.com/u/DannyBO)
#### Post date: [6. September 2024 um 05:44 UTC](https://forum.shopware.com/t/breakpoint-fuer-offcanvas-navigation/105092/3 "2024-09-06T05:44:15Z")
das interessiert mich auch danke 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍 👍
---
### Author:  [@carpinus](https://forum.shopware.com/u/carpinus)
#### Post date: [6. September 2024 um 09:00 UTC](https://forum.shopware.com/t/breakpoint-fuer-offcanvas-navigation/105092/4 "2024-09-06T09:00:17Z")
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“.
``
Zusätzlich noch per CSS dafür sorgen, dass die Main-Navigation erst ab 1200px Breite eingeblendet wird.
```auto
@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.
---
### Author:  [@system](https://forum.shopware.com/u/system)
#### Post date: [6. Oktober 2024 um 09:00 UTC](https://forum.shopware.com/t/breakpoint-fuer-offcanvas-navigation/105092/5 "2024-10-06T09:00:43Z")
Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.