Låt sidhuvudet följa med när besökaren rullar, utan att skymma menyer eller andra viktiga kontroller.
Guiden är ett exempel med egen CSS för Nordic i temaredigeraren med Innehåll, Stil och Tillägg. Temaredigering finns i Go, Plus och Pro. Exemplet är inte en universell inställning för alla teman eller för TPL. Kontrollera aktuell butik, aktivt tema och version innan du ändrar något.
Förbered ändringen
Öppna Utseende → Teman och identifiera det aktiva temat.
Arbeta helst i en kopia och spara den befintliga egna CSS-koden så att just din ändring kan återställas.
Om temat är ett annat än Nordic, använd inte väljaren nedan. Identifiera först vilket element som är sidhuvud i det temat och kontrollera dess befintliga beteende.
Lägg till CSS för Nordic
Öppna temats Stil → Egen CSS. Lägg till följande exempel utan att ersätta annan egen CSS:
.nordic--header {
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
top: 0;
z-index: 1000;
}position: sticky håller sidhuvudet vid top: 0 inom dess rullningsbehållare. Ett annat top-värde kan behövas om det finns en fast list ovanför. Egenskapen fungerar beroende på sidans layout; en överordnad behållares höjd och overflow kan påverka resultatet.
z-index: 1000 är ett exempel, inte en garanti att sidhuvudet alltid ligger över andra element. Det kan också göra att sidhuvudet skymmer dialoger, sökresultat eller samtyckesrutor. Höj inte värdet blint för att lösa ett överlapp.
Spara och prova hela sidans beteende
Spara och öppna rätt temas förhandsvisning.
Rulla på både mobil och dator. Kontrollera att sidhuvudet inte täcker första rubriken eller en ankarlänks mål.
Öppna meny, sökning, varukorg och dialoger. Alla viktiga knappar ska kunna nås.
Kontrollera även produkt- och kassasidor där sidhuvudet kan ha annat beteende.
Ta bort just det tillagda CSS-blocket om resultatet är fel och kontrollera att det tidigare beteendet är återställt.
Snabbstart
Bekräfta Nordic och rätt butik.
Lägg till CSS i en arbetskopia.
Kontrollera rullning, mobilmeny och överlapp.
Använd ändringen först när kontrollerna passerar.
CSS-exemplet kräver åtkomst till egen CSS och gäller Nordic. Go, Plus och Pro ger temaredigering, men samma CSS-väljare ska inte antas fungera i andra teman.
