Sticky Nav Bar won't work on this template?

I’m using a shop template from webflow but can’t make this nav bar sticky. I made the elements relative per a tip. https://preview.webflow.com/preview/hcf-shop?utm_medium=preview_link&utm_source=designer&utm_content=hcf-shop&preview=fedaf23c9e85b8848dae918129d277ac&pageId=5f2d5516dfe5664d0bb789a6&mode=preview


Here is my site Read-Only: https://preview.webflow.com/preview/hcf-shop?utm_medium=preview_link&utm_source=designer&utm_content=hcf-shop&preview=fedaf23c9e85b8848dae918129d277ac&pageId=5f2d5516dfe566ef1bb7899f&itemId=5f2d5516dfe56650d5b78a06&mode=preview

If it’s always going to be at the top of the page you can always use position: fixed with the added benefit that it’s much more widely supported. Keep in mind it may cover up some of your content but you can fix that by adding margin.

In your case, the position: sticky isn’t working because you need to set the top property—this tells the sticky element when it should start “sticking”. Update this to zero and it should be working as expected:

image

1 Like