SHAPES Theme - Header in einer Zeile (nicht zwei)

[PureCakes]

Hallo liebe Community,

leider kann ich selbst keinen Code schreiben, daher die Frage, ob jemand mir helfen könnte ein benutzerdefiniertes CSS zu schreiben für den Header. Aktuell sieht mein Header wie folgt aus:

Ich hätte den Header aber gerne analog der Website: www.korodrogerie.de - also alle Überschriften in einer Zeile (siehe Screenshot). 

Kann mir da jemand helfen?

Vielen Dank und viele Grüße

Jasmin

[Gabe]

Hey Jasmin! @PureCakes 

Das scheint ein Limit der Pixelbreite deines Header im Shapes Theme zu sein. Der eine Menüpunkt Unsere Story & hinter den Kulissen nimmt ja auch den Löwenanteil des Platzes auch weg und du müsstest diesen kürzen, vielleicht in einem Dropdown im Menüpunkt "Blog" platzieren?

Hast du mal einen Link zu deinem Shop parat? Eine CSS Lösung könnte aber den Header komisch darstellen lassen, vor allem auf Mobile.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[PureCakes]

Hallo Gabe,

Danke für deine Rückmeldung!

Ja, absolut. Den längsten Punkt würde ich auch kürzen, reicht aber dennoch nicht für eine Zeile. Schon probiert.

Link zur Website: www.purecakes.de

Aber die Breite muss man doch manuell anpassen können mit dem richtige Code, oder?

Viele Grüße
Jasmin

[Gabe]

Hey Jasmin! @PureCakes 

Ok danke für den Link und du kannst CSS anwenden aber das wird alles verrutschen, wie gesagt. Probiere mal diesen hier:

.site-header .flex {
   flex-wrap: nowrap;
   justify-content: space-between;
}

.site-header nav ul {
   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   width: 100%;
}

.site-header nav ul li {
   flex-shrink: 0;
}

.site-header .header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.site-header .logo-image {
   max-width: 120px; /* Logo anpassen, falls nötig */
   flex-shrink: 0;
}

.site-header .header-navigation {
   flex-grow: 1;
   justify-content: space-between;
}

Ansonsten poste bitte deine Frage samt Link in unserem Design Forum auf Englisch und es wird ein Experte dir weiterhelfen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[PureCakes]

Danke,

Es hat schon fast fit, aber jetzt überlappen die Überschriften die Icons rechts 😉
Ich stell die Frage, wie du empfohlen hast, vielen Dank 😉

Viele Grüße

Jasmin