My cart is hidden and I have no idea how to fix it

Hi webflow community,

I really need help with this as I have no idea what happened and why this is happening all of a sudden. My cart is hidden in preview and in my published site- it looks like it hiding within the nav bar. I have already played around with the z-index so I don’t think it’s that. I honestly don’t know what I have done.

Any help is highly appreciated,

read-only: https://preview.webflow.com/preview/luibh-skincare?utm_medium=preview_link&utm_source=designer&utm_content=luibh-skincare&preview=d71814558f863c6c1546cbbc347b446c&mode=preview

Hey Sonia! Good looking site you got here. I think i found the solution to your problem. The container div “Menu” has the property “Overflow: Hidden” Activated. Try changing it to overflow visible and the menu should appear.

image
image

Thanks for the response @felix_hellstrom . I have changed it now and it has helped somewhat. But the green coloured parts are still hiding and the “cart wrapper” which is meant to make the screen darker while the cart is open is only happening in the nav bar. Do you know how to fix this too?!

Screenshot 2021-01-12 at 11.31.15|690x407

hmm I tried looking through the page again and I think some other element is in the way. I could’n find which one though. Could you send me a link to the published domain so I can inspect the site with google chromes dev tools.

@felix_hellstrom yes ofcourse. here it is: www.luibh-skincare.webflow.io

or if that one doesn’t work www.luibhskincare.com

(the first one seemed to not work when I clicked on it for some reason)

Okay so I think I got it working by giving the “Cart Container” A fixed height of: 100vh


image

I think the “Cart Wrapper” Needs the same property but I can’t seem to change it.

1 Like

Okay that worked - at least the cart is now working. Yea I have no idea why it won’t let me do anything to that container. Very strange. Either way thank you so much for the help.

1 Like

Yeah no problem, glad I could help out!

Having this same issue… any fixes as we can’t modify the ‘Cart Wrapper’?

Hi Timothy,

I did a bunch of research as it kept doing the same thing no matter how many times I did the nav bar from scratch, and found out that apparently this is known glitch. It happens when you have added an animation to your nav bar. I have fixed the problem by not having any animations on the nav bar… it isn’t ideal as I wanted to hide and show it as people scroll through, but at least it works perfectly now.

Not sure how people have made it work with animations… I will just keep it that way for now.

Hope that helps you

This happens when a filter or animation, such as a Backdrop filter, is added to a Card element. You need to remove any filters from it to allow the Card Wrapper to be displayed.

1 Like

Thank you for this comment! It was driving me crazy not understanding why my cart was being constrained without any interactions and sure enough I removed the backdrop filter from the nav and it fixed it.

Thanks! It’s so weird they have’t fixed this yet

You can also solve this by forcing wrapper to have 100vh height.

<style>
.w-commerce-commercecartcontainerwrapper {
height: 100vh !important;
}
</style>

I’m having the same issue. You’re right it’s that Backdrop Filter. Once I took it out, it worked again. Thanks

If it helps anyone I had the same issue.

Turns out mine was due to having backdrop filter involved, specifically in a parent div (the navbar) of the cart. I removed the backdrop filter from the nav, which was obsolete anyway and removed the filter I had in my nav interaction too, and all is well.

From webflow support " Upon researching this, it seems the root cause here is that there’s conflict between the CSS property filter and fixed child elements, I’ve found this post on Stack Overflow which explains this behavior: Why does applying a CSS-Filter on the parent break the child positioning? | Stack Overflow"