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.

Ankündigungsleiste verdeckt den Header auf der Mobilversion

Ankündigungsleiste verdeckt den Header auf der Mobilversion

Stunny
Besucher
3 0 0

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
Besucher
3 0 0

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);
}