Why does my menu button's hover effect break the overlay?

OrionT · ‎03-07-2024

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

ThePrimeWeb · ‎03-07-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Devinlabs · ‎03-07-2024

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.

Ravi Kumar
Shopify Partner
DevinLabs Solutions

- Need a Shopify developer? Email: devinlabsolutions@gmail.com

- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications :red_heart::red_heart:

Website: https://devinlabs.com
LinkedIn: https://www.linkedin.com/company/devinlabs-solutions

PageFly-Oliver · ‎03-07-2024

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

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

ThePrimeWeb · ‎03-07-2024