Cart wrapper hidden within header because of trigger?

Hi guys,

I’ve been struggling with my shopping cart today. When trying to open the cart, it sort of opens only within the borders of the Navbar. So when I checked what caused the issue I found that turning off the trigger that resizes my Navbar’s height upon scrolling down, everything worked fine.

Does anyone know if/how I can keep the trigger and make the shopping cart work the way it should?

I already rebuilt the Navbar from scratch without any luck.

Cheers!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

3 Likes

A screenshot to clarify…

Has anyone else had this issue? It’s caused by the header’s move trigger. When I turn that off, everything works fine - unfortunately I need that trigger to hide the black bar on scroll.

1 Like

I have the exact same issue and only happens after I apply the hide/show trigger:

I used the standard Navbar, added the standard cart and applied the standard Show & Hide animation: Navbar show & hide on scroll | Webflow University

If anyone can point us out to building a Navbar that hide and shows and also has the standard cart inside that would be awesome.

The only option I am thinking of now is to remove the cart from the Navbar and let the cart float in the corner when the Navbar is hidden?!

1 Like

Glad I’m not alone! I’ve just posted this in the community forum as well because I can’t get it right. There’s an older post (April this year) that discusses the same issue…

We’ve got the same issue. Turning the transform/interaction off solves it, but we need that to hide the menu… any solution yet?

1 Like

did you figure a way around this?

This is quite bad, people use to speak about how good this community is…but this question has no answers, even from the webflow team, this is quite an important issues the cart is quite useless inside if can not be used but no body bothers to answer…

I am having the same issue. Turning off the page scrolled animation on the navbar makes it visible, but i need this navbar to hide when scrolling down and appear when scrolling up.

+1 on this. Surprised this is still an issue

Yeah I’ve got the same issue! Come on Webflow give us a solution! Pretty bad glitch!

Not really. Eventually had to switch to a different web builder anyway because client wanted to provide iDEAL as payment method.

Still curious if this topic is being noticed at all and if we can expect a fix soon though!

Same issue. Any fix yet?

Also having the same problem. Cart only shows within the navbar div.
The workaround is not having any interactions set to the navbar (like on page load animation).

Ive seen a few threads from other people describing the exact same problem, all with different post dates, so im surprised this hasn´t been looked at yet.

I think it might be a bug, because like a year ago i dont think i had this problem happening.

Need help on this too…This was actually working WITH an interaction until I tried changing the type of cart from modal to right aligned. Now neither works…

Inside the nav symbol, put this custom code and it will work Hide header on scroll down, show on scroll up - JSFiddle - Code Playground

Replace $(‘header’) with $(‘.your-nav-class-name’)

Hi Everyone,

Changing my “Cart Container” Height to 100VH somewhat resolved this issue for me.

Cart Container

Size

Hope this helps.

3 Likes

Same issue here guys - and changing the cart container size helped a little - but still an happening, especially on mobile.

I think I may have the answer as I was struggling with the exact same thing, simply try changing the overview mode on the navbar from hidden to visible.

henrymcgillis recognized that if any parent of the cart element has a move animation on it, the cart modal will not show properly. However, you can actually put a move animation on the cart element itself and it will still work.

This was the fix for my project: I took the cart element out of the parent that had a move animation on it. I wrapped the cart element and my old wrapper div inside a new “clean parent div”. I put the same move animation on the old wrapper div AND the cart element itself. The new clean parent div wrapper SHOULD NOT have a move animation on it. It then worked properly.

henrymcgillis’ original post is in this thread:
Ecommerce Cart does not work with position: fixed