- This topic has 18 replies, 4 voices, and was last updated 3 years, 6 months ago by Elvin.
-
AuthorPosts
-
October 14, 2020 at 3:21 am #1488222nik9
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/db7bJ3VCheers
October 14, 2020 at 10:10 am #1488951TomLead DeveloperLead DeveloperHi 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.October 16, 2020 at 6:36 am #1491872nik9Hello 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
October 16, 2020 at 11:10 am #1492410TomLead DeveloperLead DeveloperThere 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.
October 17, 2020 at 4:35 am #1492986nik9Hello 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; }
October 17, 2020 at 11:36 am #1493529TomLead DeveloperLead DeveloperHmm, 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?
October 18, 2020 at 5:22 am #1494108nik9Hello 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; }
October 18, 2020 at 12:12 pm #1494674TomLead DeveloperLead DeveloperWhat if you remove this part?:
transform: translateX(0px);
October 19, 2020 at 12:47 am #1495097nik9Hi 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/LR8b4kCOctober 19, 2020 at 9:54 am #1495887TomLead DeveloperLead DeveloperIt 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?
October 19, 2020 at 4:08 pm #1496289nik9Hi 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
October 19, 2020 at 5:28 pm #1496329ElvinStaffCustomer SupportHi,
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.
October 20, 2020 at 5:19 am #1496840nik9Hello 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. π
October 20, 2020 at 7:12 am #1496988DavidStaffCustomer SupportHi 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.
October 20, 2020 at 1:36 pm #1497621nik9hi 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. π
-
AuthorPosts
- You must be logged in to reply to this topic.