Wie du deine Navigation zentrieren kannst

Wie du deine Navigation zentrieren kannst

Alexander Wolf 22. November 2015 8

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?

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

8 Kommentare

  • 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?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Logo Größe anpassen mit Less für Shopware 5
Plugin Theme anpassen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Theme: Eigenes Listing Layout erstellen
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Staging Umgebung – Was ist das und warum brauchst du eine?
© 2017 by 8mylez. Powered by Goltfisch GmbH.