Solved

How do I fix the z-index issue on my sticky header?

MKrantz
Excursionist
18 0 4

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?

Accepted Solution (1)

tim
Shopify Expert
3274 235 1183

This is an accepted solution.

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-templateproduct-recommendations,  etc.

Screenshot 2024-03-07 at 12.35.45 pm.png

 

This one is broken -- see how main includes only one child and looks like it's not fully included as well.

Screenshot 2024-03-07 at 12.29.43 pm.png

 

This may happen if you do not close your tags properly or they are not properly nested, for example instead of 

 

<main>
 <div> 
  ... 
 </div>
</main>

 

 

you have 

 

 

<main>
 <div> 
  ... 
</main>
 </div>

 

or 

<main>
 <div> 
  ... 
 </div>
 </div>
</main>

 

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  </div> closing tag is the problem:

Screenshot 2024-03-07 at 1.06.55 pm.png 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.

View solution in original post

Replies 3 (3)

PageFly-Oliver
Astronaut
840 176 156

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

tim
Shopify Expert
3274 235 1183

This is an accepted solution.

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-templateproduct-recommendations,  etc.

Screenshot 2024-03-07 at 12.35.45 pm.png

 

This one is broken -- see how main includes only one child and looks like it's not fully included as well.

Screenshot 2024-03-07 at 12.29.43 pm.png

 

This may happen if you do not close your tags properly or they are not properly nested, for example instead of 

 

<main>
 <div> 
  ... 
 </div>
</main>

 

 

you have 

 

 

<main>
 <div> 
  ... 
</main>
 </div>

 

or 

<main>
 <div> 
  ... 
 </div>
 </div>
</main>

 

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  </div> closing tag is the problem:

Screenshot 2024-03-07 at 1.06.55 pm.png 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
MKrantz
Excursionist
18 0 4

Yep, you are right. Makes total sense. I removed the tag and it fixed it. Thank you! Appreciate the info here, very thorough.