Wenn Sie ElementorKit für Ihre Website verwenden und auf ein Problem stoßen, bei dem die mobile Menüüberlagerung Benutzer daran hindert, das Menü zu schließen, sind Sie nicht allein. Dies ist ein bekannter Fehler, bei dem das Menü sichtbar bleibt, obwohl Benutzer die Seite scrollen können. Die Schaltfläche „X“ zum Schließen reagiert nicht mehr, was zu einer frustrierenden Benutzererfahrung führt. Glücklicherweise gibt es eine einfache Lösung für dieses Problem.
Das Problem verstehen
Das Problem resultiert aus widersprüchlichen Z-Indexwerte im Overlay des mobilen Menüs und im Menücontainer. Das Overlay verdeckt den Schließen-Button, sodass Benutzer nicht damit interagieren können. Dadurch bleibt das Menü geöffnet, auch wenn Benutzer versuchen, es zu schließen oder außerhalb des Menübereichs zu klicken.
Schritt-für-Schritt-Lösung
So können Sie das Problem beheben, indem Sie die Z-Indexwerte in Elementor:
1. Öffnen Sie den Header in Elementor
- Navigieren Sie zu Ihrem WordPress Armaturenbrett.
- Gehe zu Vorlagen > Gespeicherte Vorlagen und suchen Sie Ihren Header.
- Klicken Bearbeiten mit Elementor , um die Kopfzeilenvorlage im Elementor Editor.
2. Passen Sie den Z-Index des Overlays an
- Wählen Sie die Container das Ihr mobiles Menü-Overlay enthält.
- Unter dem Fortgeschrittene Scrollen Sie nach unten zum Benutzerdefiniertes CSS Abschnitt.
- Fügen Sie den folgenden CSS-Code hinzu:
z-index: auto !wichtig;
Dadurch wird sichergestellt, dass der Z-Index des Overlays die Schaltfläche „Schließen“ nicht überschreibt oder Benutzerinteraktionen beeinträchtigt.
3. Legen Sie einen hohen Z-Index für das Menü fest
- Wählen Sie nun die Mobiler Menücontainer (das Element, das die Menüelemente und die Schaltfläche „Schließen“ enthält).
- Unter dem Fortgeschrittene Suchen Sie auf der Registerkarte Z-Index Feld.
- Setzen Sie den Z-Index auf 5000 speziell für die mobile Ansicht. Dies können Sie tun, indem Sie auf die Reaktionsmodus in Elementor und wählen Sie die mobile Ansicht.
- Desktop-Ansicht: Lassen Sie den Z-Index wie er ist.
- Mobile Ansicht: Setzen Sie den Z-Index auf 5000.
4. Speichern und testen
- Speichern Sie Ihre Änderungen durch Klicken auf Aktualisieren.
- Testen Sie Ihr mobiles Menü, um sicherzustellen, dass das Overlay die Schaltfläche „Schließen“ nicht mehr blockiert und das Menü wie erwartet geschlossen wird, wenn Sie außerhalb klicken oder die Schaltfläche „X“ verwenden.
Warum das funktioniert
Der Standard-Z-Index des Overlays ist oft zu hoch, sodass es über interaktiven Elementen wie der Schaltfläche „Schließen“ angezeigt wird. Indem Sie den Z-Index des Overlays auf Auto und Erhöhen des Z-Index des Menüs auf 5000, priorisieren Sie das Menü und seine interaktiven Elemente gegenüber dem Overlay.
Abschließende Überlegungen
Dieser Z-Index-Konflikt in ElementorKit ist ein häufiger Fehler, aber mit der obigen Lösung können Sie das Problem schnell beheben und das erwartete Verhalten Ihres mobilen Menüs wiederherstellen. Die Funktionalität Ihres mobilen Menüs ist für die Benutzererfahrung von entscheidender Bedeutung, insbesondere da mobile Benutzer einen erheblichen Teil des Webverkehrs ausmachen.
Wenn das Problem trotz dieser Änderungen weiterhin besteht, wenden Sie sich für weitere Unterstützung an das Supportteam von ElementorKit.
