Cart gets "stuck" in navbar if backdrop filter is added to navbar

Design help General
1

I am building an e-commerce website. The navbar is fixed to the page top and has the cart inside it. However, the second I add a “backdrop filter” e.g. Blur to my navbar (element name in Read-only link is “Navbar Wrapper”), I notice the cart does not open as it should. It gets “stuck” inside the navbar. As soon as I remove the backdrop filter, the cart starts opening like it should.

Here is the read-only link to the project: Webflow - Sensei - Webflow Template for Saas

Does anyone have any insight on why this is happening? Took me forever to isolate the issue but now I cant solve it! Am I doing something wrong or is this a bug?

2

Hi,

I believe this could be a bug in Webflow but you can solve this by using a custom code. From your navbar component, add a new element Code Embed just right below the Navigation Wrapper and insert the following code:

<style>
.cart-container {
    position: fixed !important;
    top: 50px; /* Adjust this value as needed */
    transform: translateX(-50%);
    z-index: 1001;
}
.w-commerce-commercecartcontainerwrapper {
    position: fixed;
    inset: 0px;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.8);
    height: 100vh;
}
</style>

Please see attached images for your reference.

image
image1697×755 102 KB

image (1)
image (1)1697×749 103 KB

I hope this works for you.