Wie Du Deine Navigation zentrieren kannst

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.

Shop Navigation im Header zentrieren (Shopware 5)

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.

Shopware Theme anlegen

Wir fangen mit dem berühmten Anlegen eines Themes an. Habt ihr noch nicht?

Dann aber schnell Theme anlegen

Code

In die Datei

themes/Frontend/EUERTHEME/frontend/_public/src/less/_modules/main-navigation.less

packen 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:

Varianten

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

Weitere Links

• Shopware E-Mail Template
• Shopware Merkzettel deaktivieren
• Shopware Listing Layout