Wie Du Deine Navigation zentrieren kannst

Wie Du Deine Navigation zentrieren kannst

Alexander Wolf 22. November 2015 10

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:

Navigation zentrieren bei Shopware 5

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

10 Kommentare

  • Leider funktioniert das hier nicht mehr, Hilfe 2018?
  • Hey Polan,

    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
  • Im Order themes/Frontend/meintheme/frontend/_public/src/less/_modules/
    ist keine main-navigation.less. Dort ist überhaupt keine Datei drin.
  • hat sich erledigt, hab gerade in deinem Theme Artiekl gelesen, dass ich die ja erst anlegen muss
  • Sehr schön. Richtig gut wäre noch die gleichmäßige Verteilung. Das habe ich auf www.zahndox.de gemacht.
  • Hallo Ralf,

    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?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Ü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


Unsere Partner
© 2024 by 8mylez GmbH //  Impressum + Datenschutz