Cannot figure out how to fix the z-index on our sticky header. When you scroll down on this page the sticky header is in front of some elements but behind in others.
https://orbitbaby.com/products/stroll-ride
What is the class I need to target and the code here I need to add to fix the z-index?
Hi @MKrantz ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
.site-header--stuck{
z-index:999 !important
}
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
This is not a CSS problem and modifying your stylesheet would not help.
You have HTML structure errors and looks like it happens only on some product pages.
Say https://orbitbaby.com/products/g5-toddler-car-seat-liner seems to be ok, but many products are not good.
Look at the screenshots:
This is a proper structure – see how main includes product-template, product-recommendations, etc.
This one is broken – see how main includes only one child and looks like it’s not fully included as well.
This may happen if you do not close your tags properly or they are not properly nested, for example instead of
you have
or
or something similar.
When browser encounters stuff like this, it will try to close tags automatically, but often it leads to broken page.
It’s a bit hard to pinpoint what exactly you need to fix from outside, so far it looks like the highlighted closing tag is the problem:
Yep, you are right. Makes total sense. I removed the tag and it fixed it. Thank you! Appreciate the info here, very thorough.
