Make the arrow icon appear only when the mouse is over it

[ArnauP]

I would like to make the arrow icon appear only when the mouse is over it.

www.JaccomCollection.com

This is what i have now:

This is what i want to look like when i have the mouse in a title (in this case in "Travel"):

Thanks You

[websensepro]

Hi @ArnauP , 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.menu-drawer__menu-item>.icon-arrow {
    display: none !important;
}

.menu-drawer__menu-item:hover svg.icon.icon-arrow {
    display: block !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[BSS-TekLabs]

- Here is the solution for you @ArnauP 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.menu-drawer__menu-item:hover svg.icon.icon-arrow {
    display: block !important;
}
.menu-drawer__menu-item>.icon-arrow {
    display: none !important;
}
</style>

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-B2B · Accepted solution]

@ArnauP ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.menu-drawer__menu  details svg {
  opacity: 0;
}
.menu-drawer__menu details:hover svg {
   opacity: 1;
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊