Video ist auf dem Smartphone vor dem Menüpunkt

[Florian-Mi]

Hallo Liebe Community, ich habe über ein Youtube Video ( https://github.com/mrdexters1/videoBackground.liquid/blob/main/videoBackground.liquid ) das ist der Link zum Code. // Einen Code in meinem Shop eingefügt, um Videos vom Desktop hochzuladen und diese als Loop abspielen zu lassen. Auf dem Desktop funktioniert es einwandfrei. Sobald man aber mit dem Smartphone auf meinen Shop zugreifen möchte und das Video zu sehen ist, kann man zwar das Menü anklicken, dieses ist aber hinter dem Video und somit nicht zu erkennen.

 So sieht das Menü aus, wenn nur ein Bild im Bereich zu sehen ist, das Menü ist vor dem Bild.

So sieht es aus, wenn ein eingefügtes Video in dem Bereich ist, das Menü ist hinter dem Video.

Gibt es die Möglichkeit, den Code zu bearbeiten, damit die Smartphone Version den Menüpunkt über dem Video anzeigt. Also das Video in den Hintergrund legt? Vielen dank und einen schönen Tag 🙂

[Gabe]

Hey @Florian-Mi 

Danke für die Bilder und das Problem, das du beschreibst, scheint ein Z-Index-Problem zu sein. Der Z-Index in CSS bestimmt die Stapelreihenfolge von Elementen, die übereinander liegen. Dein Video hat wahrscheinlich einen höheren Z-Index als das Menü, wodurch es auf Mobilgeräten über dem Menü angezeigt wird. Um dieses Problem zu beheben, kannst du den Z-Index des Videos reduzieren oder den Z-Index des Menüs erhöhen.

• Suche nach der Stelle im CSS-Code, die das Video und das Menü beeinflusst. Basierend auf deinem Code könnte dies im Abschnitt @media screen and (max-width: 767px) sein.
• Der Z-Index des .videoBackground .fullscreen-video-wrap ist derzeit auf 3 gesetzt. Das könnte zu hoch sein und das Menü überlagern. Reduziere diesen Wert oder setze ihn auf 0.
• Finde den CSS-Selektor für dein Menü. Dies könnte etwas wie .main-menu, .site-header oder ähnlich sein, abhängig von deinem spezifischen Theme.
• Erhöhe den Z-Index dieses Selektors, um sicherzustellen, dass das Menü über dem Video erscheint. Zum Beispiel:

.main-menu {
    z-index: 10; /* oder einen anderen Wert, der höher als der des Videos ist */
}

Falls du Schwierigkeiten hast, die richtigen Klassen oder IDs zu finden, oder wenn das Problem weiterhin besteht, könnte es hilfreich sein, einen unserer zertifizierten Frontend Webentwickler oder Shopify-Experten zu konsultieren. Sie können den Code genauer untersuchen und spezifische Anpassungen vornehmen.