Help with Sticky div

Store Design
, , ,
1

Hello,

I’m trying to make a simple div to be sticky at the top of my page whenever a user scrolls down. The div is initially below the header and it’s supposed to stick at the top when the user scrolls.


Stick

Simple div.

#sticky-div {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 10px;
  text-align: center;
}

CSS related to the div.

I’ve already set the Header not to be sticky. But something is preventing my div to stick anyway.

Appreciate any help :folded_hands:

2

If the parent element has CSS style: overflow, it is possible to prevent sticky

3

Hello Wo,

thanks for the answer. I’ve read that but I can’t figure out which is the parent element or if anything has an overflow. I just created a custom liquid from the customization, added this div with CSS, and moved it below the header.

4

Can you provide a website link?