Solved

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

OrionT
Visitor
3 0 0

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,

OrionT_0-1709793709057.png

and here is the overlay (right under the icon only) when hovering,

OrionT_1-1709793744119.png

 

Site: https://projectwee.org/

Password: iachay2

 

 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2028 583 461

This is an accepted solution.

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.

ThePrimeWeb_0-1709806061477.jpeg

 

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

Replies 4 (4)

Devinlabs
Shopify Partner
15 1 3

Hi OrionT,

You can do simply fix by CSS. I attached a screenshot. please

check it will solve your issue.

shoppify issue.png

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
Astronaut
878 190 171

Hi @OrionT ,

You can remove old code and apply new code

PageFlyOliver_0-1709798166638.png

 



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
Shopify Partner
2028 583 461

This is an accepted solution.

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.

ThePrimeWeb_0-1709806061477.jpeg

 

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!
OrionT
Visitor
3 0 0

Works perfect, thank you!