Ein Nutzer möchte in der mobilen Version seines Shops zwei Menüelemente tauschen: Der Warenkorb-Icon soll mit dem Hamburger-Menü (drei Striche) die Position wechseln.
Wichtige Hinweise:
Lösungsansatz:
flex-direction: row-reverse) wurde angebotenAktueller Stand:
Hallo zusammen,
wie der Titel schon verrät, möchte ich in der Mobilen Version des Stores 2 Icons / Menüpunkte miteinander tauschen.
Der Menüpunkt Warenkorb soll mit dem Hamburger (3 Striche) getauscht werden. Weiß jemand wie ich das umsetzten kann? Wichtig ist, dass dies ist der Mobilen Version geschehen muss.
Ich benutze das Motion Theme
Mit freundlichen Grüßen
Wenn dir die 7 unten abgebildeten Theme Einstellungen nicht ausreichen wird das eine komplexe Programmierung verlangen, die sowohl dein Theme aus den Theme Updates ausschließt, sowie ggf. die Page Loading Speeds verschlechtert. Anonsten einen Experten engagieren:
Programmierung - Beispiel:
Zuerst musst du die Reihenfolge im HTML so ändern, dass der Warenkorb zuerst angezeigt wird, gefolgt vom Hamburger-Menü. Verschiebe beispielsweise das des Hamburger-Menü HTML und das -Element des Warenkorbs in der Reihenfolge, wie sie auf mobilen Geräten erscheinen sollen (genommen aus der Developer Console und meinem Test Motion-Theme):
Einkaufswagen
Etwas CSS dafür:
@media only screen and (max-width: 768px) {
.header-item--icons .site-nav__icons {
display: flex;
flex-direction: row-reverse;
}
}
Vielen Dank Deine Nachricht.
Der oben stehende HTML Code hat funktioniert. Ich habe den CSS Teil weggelassen, da sonst die Icons nicht da sind wo sie seien sollen. Oder hat der CSS Code eine wichtige Aufgabe / Bedeutung?
Beste Grüße
Das CSS ist nur für die “Verschönerung” des Codes…