uniqbag.de · Kopfnavigation · 25.09.2026

Drei Vorschläge für die Navigation

Alle drei Varianten liegen über dem echten Hero-Motiv und nutzen die Schriften der Site (Plus Jakarta Sans, Outfit) und das Rot #DD3210. Mit dem Regler unten lässt sich die Fensterbreite durchspielen: keine Variante bricht mehr um.

Warum es gerade so aussieht

Umbruch: Die Navigation ist absolut in der Mitte platziert (left: 50%). Dadurch bekommt sie nur die halbe Kopfbreite als Platz. Seit „Blog“ dazukam, passt der Text nicht mehr hinein, und „Individuelle Lösungen“ / „Andere Lösungen“ werden zweizeilig.
Unruhe: Fünf kleine Pfeile in drei Grautönen vor jedem Punkt, dazu ein Trennstrich und ein zusätzlich abgeschwächter Punkt. Das Auge findet keine klare Linie.
Formensprache: Knopf und Leuchtschatten sind Pillenform, das wirkt nach Standard-Vorlage.

Ist-Zustand (Screenshot)

Aufgenommen auf preprod.uniqbag.de bei rund 1470 px Fensterbreite.

Aktueller Kopfbereich mit zweizeiligen Navigationspunkten

VARIANTE 1

Linksbündig, ruhig

Logo und Menü bilden eine Zeile, rechts steht nur, was zum Handeln führt.

Andere Lösungen Test-Kit kaufen

Die Verpackung, die Luft zum Schutz machtHero-Bereich der Startseite, nur zur Einordnung

Was sich ändert

Pfeile weg, ein Grauton, ein Strich in Rot unter dem aktiven Punkt und beim Überfahren. Der Kaufknopf wird kantig (3 px) ohne Leuchtschatten.

„Andere Lösungen“

Wandert als leiser Zweitlink nach rechts neben den Knopf. So bleibt die Hauptnavigation auf vier klare Punkte reduziert.

Eignung

Kleinster Eingriff, hält bis 1024 px einzeilig. Wirkt wie eine Industrie-Marke, nicht wie eine Vorlage.

VARIANTE 2

Zwei Ebenen, Versalien

Eine schmale Leiste oben trägt die Nebenlinks, die Hauptzeile bleibt frei und mittig.

Eine Marke von FUCHSPACK

Andere Verpackungslösungen › Shop Kontakt

Test-Kit kaufen

Die Verpackung, die Luft zum Schutz machtHero-Bereich der Startseite, nur zur Einordnung

Was sich ändert

Die Mitte wird echt mittig (flex statt absolut), Versalien mit Sperrung geben dem Kopf einen technischen, hochwertigen Ton. Aktiver Punkt mit rotem Strich.

„Andere Lösungen“

Gehört in die obere Leiste, zusammen mit Shop und Kontakt. Der Hinweis „Eine Marke von FUCHSPACK“ erklärt die Verwandtschaft nebenbei.

Eignung

Wertigste Wirkung, aber der Kopf wird rund 34 px höher. Beim Scrollen kann die obere Leiste einklappen.

VARIANTE 3

Rechtsbündig, Kauf im Fokus

Menü, FUCHSPACK-Aufklapper und Knopf rücken zusammen, links bleibt nur das Logo.

Test-Kit kaufen

Die Verpackung, die Luft zum Schutz machtHero-Bereich der Startseite, nur zur Einordnung

Was sich ändert

Alles Klickbare steht rechts in einer Gruppe. Der aktive Punkt bekommt ein kleines rotes Quadrat statt eines Pfeils. Kein Zentrieren, also nie ein Umbruch.

„Andere Lösungen“

Wird zu einem FUCHSPACK-Aufklapper (Maus drüber). Darin passen später Shop und Herstellerseite hinein, ohne den Kopf zu verbreitern.

Eignung

Am kompaktesten, gut für den Kaufknopf. Der Aufklapper ist ein zusätzliches Bauteil, den es auch mobil braucht.

Empfehlung

Variante 1 als Basis, Kaufknopf und Formensprache aus allen dreien

Der Umbruch verschwindet in jeder Variante, weil die Navigation nicht mehr absolut zentriert ist und die Punkte nicht mehr umbrechen dürfen. Variante 1 löst das mit dem geringsten Eingriff und wirkt am ruhigsten. Wenn UNIQBAG den Hersteller stärker sichtbar machen soll, ist Variante 2 die richtige. Variante 3 lohnt sich, sobald mehrere FUCHSPACK-Links dazukommen.

Umsetzung im Repo

Nur src/components/Header.astro ändern, Layout und Konfiguration bleiben unberührt.
Mobiles Menü bleibt wie es ist, nur die Pfeile werden entfernt.
Aktiver Punkt über Astro.url.pathname markieren.
Auf preprod pushen, auf preprod.uniqbag.de prüfen, dann PIN-Freigabe.