Mini cart problems on single product page

[nik9]

Hello

We are facing two problems with the mini cart menu when hovering over the cart icon.

1.) When a user is at the top of a page (no scroll) then the mini cart overview looks transparent. After the user scrolls down, the mini cart overview look fine: https://ibb.co/c2j2LBX

2.) After the “Sticky Add to cart banner” kicks in after a user scrolls down, the mini cart menu is not in the front. So a user can not see the first product in the mini cart hoover overview. I tried some stuff with the z-index
but no success so far. => https://ibb.co/db7bJ3V

Cheers

[Tom]

Hi there,

1. What kind of customizations have you made to the mini cart? This isn’t the default functionality: https://gpsites.co/merch/shop/

2. This is likely the same issue as above – the mini cart’s z-index (what tells it to display above other elements) isn’t working.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[nik9]

Hello Tom,

I guess it has something to do with the following CSS which we need for the off canvas close transition from that support case here: https://generatepress.com/forums/topic/push-sticky-nav-to-right-when-canvas-opens/

.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(0px);
    transition-duration: 300ms;
    transition-timing-function: unset;
}

So when we delete this CSS code then the mini cart is shown normal BUT it’s not possible to hover on the items on the mini cart.

Cheers

[Tom]

There must be other CSS causing that as well, as the default functionality works. Can you narrow down the rest of the offending CSS? Then we can look at what needs to be tweaked.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[nik9]

Hello Tom,

Yes, I found the CSS which is responsible for that error. It looks like that this is comming from the CSS below. This CSS is also a support case on which we working together. So we have side effects here: https://generatepress.com/forums/topic/display-add-to-cart-panel-on-scroll-transformation/page/2/#post-1492973

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
    transform: translateY(85px);
    pointer-events: auto;
}

@media (min-width:767px) {
.add-to-cart-panel {
    transform: translateY(56px);
}
}

@media (min-width:992px) {
.add-to-cart-panel {
    transform: translateY(85px);
}
}

.add-to-cart-panel.show-sticky-add-to-cart,
.add-to-cart-panel.item-added {
    pointer-events: auto;
}

[Tom]

Hmm, I’m not seeing anything there that would affect the mini cart – all of the selectors are specific to the add to cart panel. If you re-add each block of CSS one by one, when does it break again?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[nik9]

Hello Tom,

It looks that I was wrong.

It’s only the following CSS code which makes some problems with the mini cart.
When we delete those lines, then the mini cart looks normal.

.main-navigation:not(.slideout-navigation):not(.gen-sidebar-nav) {
    transform: translateX(0px);
    transition-duration: 300ms;
    transition-timing-function: unset;
}

[Tom]

What if you remove this part?: transform: translateX(0px);

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[nik9]

Hi tom,

This is working! But it the transform: translateX(0px); really not needed?

Last thing is the problem with the add to cart banner. The mini cart is below that banner. z-index has no effect. https://ibb.co/LR8b4kC

[Tom]

It shouldn’t be.

How exactly are you getting both to show up at the same time? Is that something a user is going to run into?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[nik9]

Hi Tom,

Yes. Actually its very easy to show up both. Scroll down the page until the add to cart banner shows up and the hover with the mouse on the cart icon in the header.

Why does z-index here not work? I try and try and try.. but no success 🙁

Cheers

[Elvin]

Hi,

Why does z-index here not work? I try and try and try.. but no success

It doesn’t work because of the DOM structure of your site.

Your cart banner is a direct child of the <body> tag of the page while your cart content goes way far down the element descendant tree.

If you’re able to hook your cart banner to a different place(ideally generate_after_header), you should be able to make z-index work.

A wise man once said:
"Have you cleared your cache?"

[nik9]

Hello Elvin,

Thanks. But why do I have a different DOM structure? Add to cart banner and mini cart are stuff from GP I guess. We do not implement custom stuff for this. 🙂

[David]

Hi there,

z-index is related to whats known as the stacking index – these indexes are relative to the parent container. However certain properties such as CSS transform changes the index. So instead of z-index you would need to transform the Z axis as well.

So instead of this CSS:

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
    transform: translateY(85px);
    pointer-events: auto;
}

Try this:

.add-to-cart-panel {
    transition: opacity .5s ease-in-out !important;
    transform: translate3d(0,85px,-1em) !important;
    transform-style: preserve-3d;
    pointer-events: auto;
}

My only concern with this is it may not eliminate the elements implied position and block the pointer events over the mini cart.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nik9]

hi david,

CSS is active but the banner still overlaps the mini cart. I also delete all my CSS for testing. However.. even without any custom CSS from the customizer the mini cart is under the banner. This is strange. 🙁

[Author]

Posts