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

[QAPT]

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

[JoshuaLarsen]

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

[QAPT]

sorry my site is https://qaptmusic.myshopify.com/

[Anshul_arora · 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.

[QAPT]

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)