Tutorial: So fixierst du dein Menü in Wix (Sticky & Responsive)

Hier ist ein detailliertes Tutorial, wie du deine Menüleiste in Wix fixierst (Sticky Header), damit sie beim Scrollen immer sichtbar bleibt, und wie du sicherstellst, dass sie auf allen Geräten responsiv ist.

Ein fixiertes Menü (Sticky Menu) verbessert die Benutzererfahrung (UX) erheblich, da Besucher jederzeit auf die Navigation zugreifen können, ohne ganz nach oben scrollen zu müssen.

In Wix gibt es zwei Wege, dies umzusetzen – je nachdem, ob du den klassischen Wix Editor oder das neue Wix Studio verwendest.

Methode 1: Im klassischen Wix Editor

Der klassische Editor ist die am häufigsten verwendete Version. So machst du deinen Header dort "sticky":

Schritt 1: Den Header auswählen

Klicke im Editor auf den obersten Bereich deiner Website (den Header), damit er blau markiert ist.

Schritt 2: Einstellungen öffnen

Es erscheint ein kleines Menü über oder unter dem Header. Klicke auf das Symbol für Einstellungen (oft als Zahnrad oder Text "Einstellungen" dargestellt) oder direkt auf den Button Scroll-Effekte.

Schritt 3: Den Effekt "Fixiert" wählen

Wähle in den Optionen den Punkt Fixiert (oder "Sticky").

• Fixiert: Das Menü bleibt starr am oberen Rand.
• Verschwindet beim Scrollen: Das Menü erscheint erst wieder, wenn der Nutzer leicht nach oben scrollt (sehr modern).

Schritt 4: Responsivität prüfen (Vorschau)

Klicke oben rechts auf Vorschau und scrolle nach unten. Das Menü sollte nun am oberen Rand "kleben" bleiben.

Methode 2: In Wix Studio (für volle Responsivität)

Wix Studio bietet fortgeschrittene Möglichkeiten für responsives Design.

Schritt 1: Header-Sektion auswählen

Klicke auf den Header-Bereich.

Schritt 2: Inspektor-Panel nutzen

Öffne rechts das Inspektor-Panel (das Icon mit den Reglern).

Schritt 3: Positionseinstellungen

1. Suche den Bereich Position.
2. Ändere den Positionstyp von "Standard" auf Sticky.
3. Stelle sicher, dass der Wert bei Oben (Top) auf 0px steht. Damit sagst du dem Element, dass es genau am oberen Rand fixiert werden soll.

Den Header "Responsive" optimieren

Damit das fixierte Menü auf dem Smartphone nicht zu viel Platz wegnimmt, solltest du folgende Tipps beachten:

1. Mobile Ansicht bearbeiten: Wechsel oben im Editor auf das Handy-Symbol.
2. Größe anpassen: Ein fixiertes Menü am Desktop kann groß sein, auf dem Handy sollte es so flach wie möglich sein. Verringere die Höhe des Headers in der mobilen Ansicht.
3. Hamburger-Menü: Nutze auf Mobilgeräten immer das Icon (drei Striche). Achte darauf, dass das Icon auch beim Scrollen sichtbar bleibt (Kontrast zum Hintergrund prüfen!).

Troubleshooting: Häufige Probleme

1. Das Menü verdeckt Inhalte

Wenn du das Menü fixierst, "schwebt" es über dem Rest der Seite. Achte darauf, dass der erste Abschnitt unter dem Header genug Abstand (Padding/Margin) nach oben hat, damit keine Texte überlagert werden.

2. Das Menü ist transparent

Oft sieht ein fixiertes Menü gut aus, wenn man oben ist, aber sobald man über farbige Bilder scrollt, wird der Text unleserlich.

• Lösung: Klicke auf "Header-Design ändern" und wähle eine Hintergrundfarbe mit leichter Deckkraft (z. B. 90% Weiß), damit das Menü beim Scrollen immer lesbar bleibt.

3. Elemente überlagern das Menü

Falls Bilder oder andere Elemente beim Scrollen über das Menü rutschen:

• Klicke mit der rechten Maustaste auf den Header.
• Wähle Anordnen -> Ganz nach vorn bringen. Damit stellst du sicher, dass der Z-Index des Menüs am höchsten ist.

Zusammenfassung

• Klassisch: Header anklicken -> Scroll-Effekte -> Fixiert.
• Wix Studio: Inspektor -> Position -> Sticky -> 0px Oben.
• Wichtig: In der mobilen Ansicht die Höhe reduzieren, um Platz zu sparen.

Fertig! Deine Besucher können nun bequem navigieren, egal wie weit sie nach unten scrollen.