Problemstellung: Ein Nutzer möchte das Hauptmenü im Shopify Flow Theme mittig ausrichten. Während Logo und Dropdown-Menü positioniert werden können, fehlt diese Option für das Hauptmenü selbst.
Antwort & Lösungsansätze:
Empfohlenes Vorgehen:
Technischer Hinweis: Die Anpassung erfordert CSS-Änderungen mit Flexbox oder Grid, um Logo und Menü unabhängig voneinander zu zentrieren. Beispiel-Code-Snippets wurden bereitgestellt.
Status: Diskussion offen, wartet auf weitere Details zu den gewünschten Layout-Anforderungen.
Zwar kann ich das Logo und das Dropdown-Menü links, mittig oder rechts platzieren, das Menü selbst jedoch nicht.
Über welche Einstellungen bzw. welche Codeanpassung in welcher Datei kann ich das Hauptmenü des Shops https://shevakehilloskosherwine.com (PW: gaipur) positionsmäßig anpassen?
Hey @RonnyWAF
Die Settings im Theme Editor sind derzeit die einzigen Optionen um das Hauptmenü im Flow Theme mittig ausrichten ohne in den Code einzugreifen. Bei einem Eingriff in den Code wird das kompliziert denn es müssen mehrere Elemente und das eingebaute Raster im Header komplett umstrukturiert werden und das sowohl auf Desktop als auch auf Handy. Was genau möchtest du erreichen oder hast du vielleicht eine Skizze oder Mockup die das Sollwert zeigt - das Menü mittig und das Logo auch, oder das Logo links oder rechts? In meinem Flow Test-Theme sieht es derzeit wie folgt abgebildet aus, wo die 2. Version mehr leeren ungenutzten weissen Raum hat was nicht sehr effizient ist:
Ich konnte dein Shop ohne Passwort betreten und sehe folgendes:
Was genau möchtest du erreichen oder hast du vielleicht eine Skizze oder Mockup die das Sollwert zeigt? Und hat dir die Flow Doku helfen können hier? Ggf. können die Flow Entwickler dir helfen das zu erreichen was du möchtest denn du hast ja schliesslich viel Geld für das Theme bezahlt.
Du koenntest einen CSS Code hinzufügen, um das Menü zu zentrieren. In manchen Fällen könnte es sein, dass du nach Classes oder IDs suchen müsstest, die für das Hauptmenü spezifisch sind (wie z.B. .site-nav), und du musst vielleicht die entsprechenden Klassen in deinem Theme überprüfen:
.site-nav {
text-align: center;
}
.site-nav > li {
display: inline-block;
float: none;
}
Wenn das Logo zentriert bleibt und das Menü dadurch nach rechts verschoben wird, musst du eventuell das Logo und das Menü in separate “div” Container setzen und dann mit Flexbox oder Grid arbeiten, um sie unabhängig voneinander zu zentrieren.
Ein Beispiel mit Flexbox könnte so aussehen:
.header-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.site-logo {
order: 1;
}
.site-nav {
order: 2;
width: 100%;
display: flex;
justify-content: center;
}
Diese Anpassung hängt stark von der Struktur des vorhandenen HTML und CSS ab, deshalb ist es wichtig, dass du den aktuellen Aufbau deines Themes verstehst, bevor du Änderungen vornimmst.
Wenn du es selber im Header Liquid programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Bei weiteren Fragen bitte bitte einen Frontend Entwickler kontaktieren! 