Liquid, JavaScript, Themes
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!!!!
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);
}
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024