FROM CACHE - de_header

Video ist auf dem Smartphone vor dem Menüpunkt

Florian-Mi
Besucher
1 0 0

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.

 Screenshot 2023-11-10 120620.pngSo sieht das Menü aus, wenn nur ein Bild im Bereich zu sehen ist, das Menü ist vor dem Bild.

 

Screenshot 2023-11-10 120643.pngSo 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 🙂

1 ANTWORT 1

Gabe
Shopify Staff
18047 2853 4197

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog