Re: Overlay Hover Issue
Hello, I gave my menu button a hover effect, which transforms it to be larger. This works well, but the default darkened overlay now breaks when I hover.
Here is the overlay when not hovering,
and here is the overlay (right under the icon only) when hovering,
Site: https://projectwee.org/
Password: iachay2
Hey @OrionT,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
#shopify-section-sections--15680778207286__header .header__icon:hover {
transform: none !important;
}
#shopify-section-sections--15680778207286__header .header__icon:hover img {
transform: scale(1.2) !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hi OrionT,
You can do simply fix by CSS. I attached a screenshot. please
check it will solve your issue.
let me know if you still facing any issue.
Hi @OrionT ,
You can remove old code and apply new code
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file -> Save
<style>
.header__icon span:hover{
transform: scale(1.2);
}
</style>
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Hey @OrionT,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
#shopify-section-sections--15680778207286__header .header__icon:hover {
transform: none !important;
}
#shopify-section-sections--15680778207286__header .header__icon:hover img {
transform: scale(1.2) !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
