Solved

How to remove underline and enable a smooth zoom when hovering over header menu items?

QAPT
Excursionist
25 0 3

I want to remove the underline and add smooth zoom transition like how I had it on my wordpress site (qaptmusic.com)

 

My current page is https://qaptmusic.myshopify.com/

 

I've searched around and tried this command. 

 

.header__menu-item span:hover {
text-decoration-line: unset !important;
transform: scale(1.1) !important;
}

 

The underline is still there when hovering NEAR the menu item and the zoom is stepped

 

 

Screenshot 2024-04-25 at 6.10.14 PM.png

Accepted Solution (1)

Anshul_arora
Navigator
375 107 74

This is an accepted solution.

Hello @QAPT ,

Please add this CSS code to remove the underline from the menu items when visitors hover over it.

You have to add the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.header__menu-item:hover span {
text-decoration: none !important;
}

</style>

I hope the code helps you.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 4 (4)

JoshuaLarsen
Shopify Partner
6 0 2

Hi QAPT,

Are you able to share a link to your site or a screen shot with more of the CSS visible?
In the screenshot that I've attached you can see how I've selected the specific element on the page (header) and you can see exactly where the CSS is inherited from on the far right in the "Styles" section of the inspector.
This is a helpful video if you want to do a little deep dive into CSS: https://youtu.be/iuZx0kHS0Xs


Screenshot 2024-04-25 at 16.30.56.png

Learning to build and building to live.
QAPT
Excursionist
25 0 3

Anshul_arora
Navigator
375 107 74

This is an accepted solution.

Hello @QAPT ,

Please add this CSS code to remove the underline from the menu items when visitors hover over it.

You have to add the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.header__menu-item:hover span {
text-decoration: none !important;
}

</style>

I hope the code helps you.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
QAPT
Excursionist
25 0 3

Yes this got rid of the underline. I was hoping for a smooth zoom scale transition for each. Like how I have it on my old site (qaptmusic.com)