Elements overlapping fixed sticky add to cart

[siddharthbhan]

I added some css to my add to add to cart and buy now and made the section fixed on bottom, now my 2nd section which is Recommended products and the footer payment icons are overlapping the sticky bar whenever I scroll down. I tried with z-index as well as positions, didn't work for me.

Please see the replicated issue here: https://carbonvelocity.com/products/lorem-ipsum-dolor-sit-amet

[Moeed · Accepted solution]

Hey @siddharthbhan 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
.scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    z-index: 1;
}
product-recommendations.related-products.page-width.section-template--19964272673083__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded {
    z-index: 0;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[siddharthbhan]

Hey Moeed, 

Thanks for the help, this is working perfectly fine for me. I initially tried the same thing in base.css but it did not work. How come this works and that did not?

[Ugurcan]

@siddharthbhan  We recently released a sticky cart app with a free plan you can use that instead, check it out: https://apps.shopify.com/pasilobus-sticky-cart