Mein erster onlineshop
mit shopware 5
UPDATE: Der Code zentrierte gleichzeitig auch die Links im Footer. Das haben wir jetzt behoben!
Ihr seid fleißig gewesen und habt euer Theme angepasst. Es sieht wirklich sehr cool aus. Nur die Navigation passt irgendwie nicht.
Die wollen wir zentrieren.
In vielen Fällen sieht das einfach besser aus. Und genau das machen wir in diesem Beitrag.
Ich finde es erstaunlich wie mit wenigen Handgriffen so viel ausgelöst werden kann.
Das Zentrieren der Navigation macht sich sehr bemerkbar, da die Navigation ein Mittelpunkt unseres Online Shops ist.
Wir fangen mit dem berühmten Anlegen eines Themes an. Habt ihr noch nicht?
Dann aber schnell Theme anlegen
In die Datei
themes/Frontend/EUERTHEME/frontend/_public/src/less/_modules/main-navigation.lesspacken wir den Code
@media screen and (min-width: @tabletViewportWidth) {
.navigation-main{
.navigation--list{
text-align: center;
}
}
}
Im Prinzip ist damit der schwierige Teil abgehackt. War gar nicht so schwer oder?
Damit der Code auch vom Theme erkannt wird müssen wir noch in unsere all.less den Link reinschreiben
@import "_modules/main-navigation";Wenn ihr keine all.less habt, dann legt sie einfach im folgenden Ordner an
themes/Frontend/EUERTHEME/frontend/_public/src/less/Easy peasy!
So schaut das Ganze fertig aus:
Tolle Hilfe, aber ich will gar nicht mittig zentrieren. Sondern auf der rechten Seite.
Das ist kein Problem für uns.
Mit einem kleinen Handgriff können wir das erledigen.
In die main-navigation.less packen wir folgenden Code
@media screen and (min-width: @tabletViewportWidth) {
.navigation-main{
.navigation--list{
text-align: right;
}
}
}
Und schon ist die Navigation auf der rechten Seite.
Toll oder?
Wenn du jetzt noch eigene Font Awesome Icons hinterlegen möchtest, schau doch einmal hier vorbei: Shopware Font Awesome
Solltest du Interesse an einem komplett anderen Design der Navigation haben, schau dir das doch einmal an: Shopware Navigation anpassen
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Über 8mylez
✓ 38 Mitarbeiter
✓ Shopware Gold Partner
✓ 40.000+ Plugin Downloads
✓ 160+ betreute Shops
✓ Full-Service Shopware Agentur
✓ 70 Shopware Videos auf Youtube
✓ Alle Shopware Zertifizierungen
Social
wir haben das Tutorial in der aktuellsten Version getestet. Funktioniert alles wunderbar.
Am besten pruefst du deinen Code. Moeglicherweise ist der Fehler ein fehlendes Zeichen.
Gruß
Alexander
ist keine main-navigation.less. Dort ist überhaupt keine Datei drin.
das ist wirklich sehr cool!
Vielleicht kannst du mir einfach den passenden Code per Mail an i@8mylez.com schicken und ich pflege es ein.
So haben alle was davon :)
Gruß
Alexander
Was denkst du?