A currency selector in the footer was disappearing when users tried to hover over the dropdown menu, unlike the header version which worked correctly.
Two CSS solutions were provided:
JavaScript approach: Add a script in theme.liquid before the </head> tag that prevents the dropdown from closing on hover
CSS approach: Add the following code to base.css:
.disclosure__list-wrapper.country-selector {
transform: unset !important;
}
Resolution: The issue was successfully fixed using one of the provided solutions. The CSS method removes transform properties that were causing the dropdown to disappear during hover interactions.
Hey guys, I have a problem with the currency selector in the footer. When I hover over it, the menu with the currencies opens normally, but as soon as I try to move the cursor over it, it disappears.
How can I fix this so it works like the currency selector in the header? I just want to be able to hover over it without it disappearing.
Here’s my store: https://1049xn-ya.myshopify.com/collections/all
Thanks a lot,
Tim
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Hello @CreatorTim
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
.disclosure__list-wrapper.country-selector {
transform: unset !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Thank you! Works
