FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.
Die Community zieht um! Ab 7. Juli ist die aktuelle Community für ca. Zwei Wochen schreibgeschützt. Du kannst die Inhalte durchsuchen, aber es können vorübergehend keine Beiträge verfasst werden. Mehr Informationen.

Ankündigungsleiste verdeckt den Header auf der Mobilversion

Ankündigungsleiste verdeckt den Header auf der Mobilversion

Stunny
Shopify Partner
14 0 3

Hey liebe Community, 

 

leider verdeckt die Ankündigungsleiste den Header auf der Mobilversion, ich habe die Ankündigungsleiste sticky gemacht, damit diese immer sichtbar ist. Das hat an sich wie folgt funktioniert:

 

{
position: sticky !important;
top: 0;
z-index: 1100;
}

 

Jedoch trat dann das oben genannte Problem auf. (siehe Bild). Das habe ich dann einfach für die Desktopversion über ein größeres oberes Padding des Header gelöst, dieser verschiebt sich ja nach oben wenn man auf der Website scrollt. Allerdings interessiert das Padding die Mobilversion nicht, daher verschiebt diese sich weiterhin unter die Ankündigungsleiste. 

 

Ich freu mich über jede Hilfe, egal ob dadurch das verschieben beim scrollen besteht oder nicht, theoretisch wäre die Lösung auch hier das Verschieben zu deaktivieren. Danke!!!!Bildschirmfoto 2024-10-13 um 14.22.12.png

 

1 ANTWORT 1

Stunny
Shopify Partner
14 0 3

habs gelöst, anbei der Code falls es jemand genauso benötigt:

 

header {
position: fixed;
top: -5;
left: 0;
width: 100%; /* Nimmt die gesamte Breite ein */
z-index: 1000;
background-color: #fff;
height: 70px; /* Definiere eine Höhe für den Header */
z-index: 1000; /* Header bleibt hinter der Ankündigungsleiste */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}