-
I’ve encountered an issue across multiple WooCommerce + GeneratePress installations that I’m hoping to find a solution for. When hovering over products in the WooCommerce mini cart located in the top menu, a dark gray overlay appears over the products in this mini cart:
https://imgur.com/a/y8BrAJbI’m wondering if this behavior can be fixed using CSS.
Ideally, I would prefer the text of the link to change color instead of having a gray overlay cover the product. Does anyone know how to achieve this with CSS, or if there’s a specific CSS snippet that could help solve this issue?
I appreciate any guidance or advice you can provide. Thank you in advance!
-
Hi there,
can you share a link to the site where I can see the issue ?
-
Yes, of course: https://www.ahealthylife.nl/webwinkel/
-
Ah ok, so the site is using the older floats structure, which uses the older legacy markup which had a few oddities like the Menu Cart links attracting the sub menu hover colors.
You can either:
a. Add this CSS to fix the color issue:
#wc-mini-cart li:hover a { background-color: transparent !important; }b. change the Customiser > General -> Structure to Flex box to bring in the newer templates where the color won’t be an issue.
Note – this change is a one way trip and although there are no reported issues, if the site has a lot of customisations you may want to test the change on a staging site. -
The problem is now solved! Thank you so much for your swift assistance. You provide excellent support (I have already found many solutions on this forum that were provided by you). Tnx!
-
Happy to hear that! And glad to be of help
- You must be logged in to reply to this topic.