Ecommerce Cart does not work with position: fixed

Community resources Bugs
1

Link to read only site here: LINK

What I’m trying to achieve:

  • A cart Button that has a position fixed within my navigation structure.
  • Clicking on this button should open the Cart Modal fullscreen.

The Problem:

  • The cart Modal does not open, or only opens inside the constraints of the fixed parent container.

What I’ve tried so far:

  • Putting the cart inside the navigation container. Sadly this opens the modal only within the constraints of this parent container
  • putting the cart in a fixed parent container outside the navigation. Sadly this opens the modal only within the constraints of this parent container
  • giving the cart button a position of fixed and leaving the parent container static. The cart button does not show up. Or elements are not clickable depending on the z-index.
  • putting the cart in a fixed parent container that stretches over the whole screen. Giving the cart button a position of fixed. But then the cart button itself does not show up.

Is there anything I can do here?
It seems like this should be achievable easily, but I don’t think this works properly in webflow.

image
image2330×1540 301 KB

image
image798×552 26.9 KB

Here is my site Read-Only: LINK

2

I did some more testing and and narrowed the problem down to animations.

  • If you have a move animation on the parent container, it breaks the modal.
  • Apparently it works with opacity animations.

Seems like a bug to me. Animating a cart should not break the cart.

1 Like
3

I’ve had similar issues with the cart. Tried a bunch of things as you did. It’s pretty terrible if you ask me. Here is my issue (similar to yours): Cart wrapper is stuck at top of page

4

Damn… I agree.
I found kind of a workaround. I animated the cart container seperately from the cart button. This works for me even if it’s not ideal atm

2 Likes
5

Vielen Dank! I will experiment with that. Your website’s design ist sehr schön.

1 Like
6

Finally got the cart to work on desktop!

  1. I made the “section” layer (which contains the Cart) have a position of “sticky.”
  2. I also made the div block called “Cart Form Wrapper” have a position of “sticky.”

Link to read only site

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.