Shopping Cart Wrapper cut off

[Rapha (Raphael Zwyer)]

I’m having trouble with the shopping cart.
The cart sits in the top nav menu and I’d like to keep it that way.
It looks fine in the designer (on desktop) but gets cut off in the preview and in the published version.
The Cart Wrapper can’t be changed – I tried to change pretty much any other cart-related element.
Taking the cart out of the nav bar didn’t help, and it’s not an option anyway.

What is it that I don’t see?!

Thank you for your help!

---

Here is my site Read-Only: Webflow - Ornament-is-crime*

[imtiazraqib]

Hey @Rapha , couple of edits you need to do to fix this.

1. Set position: fixed-full for nav, OIC-container & top-nav-bg
2. Remove the height restriction and change the height to auto for nav and OIC-container

You are now good. The cart will open as shown:

[Rapha (Raphael Zwyer)]

Thank you, imtiazraqib!
I didn’t think of that. It works!

[imtiazraqib]

I am glad it worked out for you @Rapha , just a quick tip, you are supposed to select the answer as a solution and not your own comment so the right post gets highlighted as the solution.

[Rapha (Raphael Zwyer)]

HELP!!

Hey imtiazraqib,
I’m happy that it worked out too – except that, anything below that container (which is pretty much everything), is now disabled and not clickable anymore. So basically the whole site is disabled.
If that’s the trade-off, I can’t use your solution.

But maybe you can help me fix that asap?!

[imtiazraqib]

Hey @Rapha , that would be a case of your high z-index values in your nav and OIC-container. I will take a look and update this with a solution.

[Rapha (Raphael Zwyer)]

I’m working on other things so yes, I had to hide it.
I’ll turn it back on now.

[Rapha (Raphael Zwyer)]

I briefly set it to hidden – it’s back on.
You should be able to look at it now.
Let me know…
Thank you!

[Rapha (Raphael Zwyer)]

(just to prevent confusion:
I have two nav elements, one for desktop and the other for tablet and mobile.
There are other elements with altered z-indexes on the page)

[Rapha (Raphael Zwyer)]

I found this:

Cart overflow hidden?

Got a bit of a strange issue here that has seemed to have just randomly appeared. Whenever I open the cart on the live preview or published site, it seems to be cut off by the nav-bar. There doesn’t seem to be an overflow:hidden causing this so unsure if this is a bug or not? I’ve also noticed that when I select the cart button in the designer and click “open cart” the issue isn’t there. Read only link is below if anyone could please take a look? Here is my site Read-Only: https://preview.we…

Who knew…

I disabled the on-scroll nav animation. That helps.
It sucks though that I can’t keep that more user-friendly nav-bar animation.

Looks like WF can’t handle the cart and an on-scroll animated navbar on the same site.
So basically no scroll-animated navbar in Ecommerce. Bummer!

Anyone found a work-around?

[Rapha (Raphael Zwyer)]

Don’t bother, don’t waste your time, imtiazraqib.
See my post below. The cart seems to be conflicting with the on-scroll animated navbar.

Thank you though!
I appreciate your suggestions.

[imtiazraqib]

Hey @Rapha , I did however find a workaround for you and PM’d you, not sure if you received it but it keeps your animations and everything still works. I will link it here for you to take a look at:

Hey @Rapha ,

Here are the changes I had to make for it to finally work. Since your Navigation is fixed, a lot of issues that arise are due to this reason and essentially we have to work around that.

1. Change your nav's position to fixed-top as you had it before but change it’s z-index to 2. In order to change the nav's z-index, you have to go the selector and select nav, NOT nav desktop.

2. Change your OIC-container's position to fixed-top as well with z-index to 2. Put all your elements from top-navbar directly as children of OIC-container and delete the top-navbar container. Reset the z-index of OIC-container nav-container so it inherits the default z-index of 2 from OIC-container

3. Select your menu-button-wrapper and set it’s left-margin to 0

4. Delete your top-navbar-bg element

5. Move your cart-menu-wrapper outside your nav element so it is positioned in the body instead. Set its position to fixed-top-right and margins as so:
   

6. Set your nav's BG color to white, 95 alpha

7. Set your OIC-container's BG Color to white, 95 alpha

[Rapha (Raphael Zwyer)]

Oh wow! Thank you so much for your efforts!!
So with this method I could actually keep the nav animation?
That’d be great!
I’ll certainly give that a shot – soon.

[imtiazraqib]

The shopping cart will not fall under the nav animation but your logo and the brand name should be unaffected. Please give it a try as it did work for me.