- This topic has 18 replies, 4 voices, and was last updated 4 months, 1 week ago by
Elvin.
-
AuthorPosts
-
October 14, 2020 at 3:21 am #1488222
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/db7bJ3VCheers
October 14, 2020 at 10:10 am #1488951Tom
Lead 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 16, 2020 at 6:36 am #1491872nik9
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
October 16, 2020 at 11:10 am #1492410Tom
Lead 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 17, 2020 at 4:35 am #1492986nik9
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; }
October 17, 2020 at 11:36 am #1493529Tom
Lead 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 18, 2020 at 5:22 am #1494108nik9
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; }
October 18, 2020 at 12:12 pm #1494674Tom
Lead DeveloperLead DeveloperWhat 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-developmentOctober 19, 2020 at 12:47 am #1495097nik9
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/LR8b4kCOctober 19, 2020 at 9:54 am #1495887Tom
Lead 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 19, 2020 at 4:08 pm #1496289nik9
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
October 19, 2020 at 5:28 pm #1496329Elvin
StaffCustomer 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.
A wise man once said:
"Have you cleared your cache?"October 20, 2020 at 5:19 am #1496840nik9
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. π
October 20, 2020 at 7:12 am #1496988David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 20, 2020 at 1:36 pm #1497621nik9
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. π
-
AuthorPosts
- You must be logged in to reply to this topic.