Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there! I'm wondering how to remove the underline effect when hover on the menu and the submenu item.. I hope there is no underline at all. Thanks in advance.
Is it possible to get your store URL to inspect it?
It does look like it's password protected, so we would need your store preview password.
https://7d0294-2.myshopify.com/ I removed the password! Thank you for telling me this.
You can use the following css:
.header__menu-item:hover {
text-decoration: none !important;
}
ul#HeaderMenu-MenuList-3 {
text-decoration: none;
}
I've added all these codes in the base.css file. but still wouldn't work. Could you take a look?
.header__menu-item:hover {
text-decoration: none !important;
}
ul#HeaderMenu-MenuList-3 {
text-decoration: none;
}
.header__active-menu-item {
text-decoration: none;
}
.header__menu-item:hover span {
text-decoration: none;
}
.header__menu-item:hover span, .header__active-menu-item {
text-decoration: none;
}
.header__submenu .header__menu-item:hover {
text-decoration-line: none !important;
}
.header__submenu .header__menu-item:before {
background: transparent !important;
}
.header__menu-item .header__active-menu-item {
text-decoration: none;
}
.header__menu-item span {text-decoration: none;}
.header__menu-item span {
text-decoration: none;
}
.header__menu-item span{text-decoration: none !important;}
Hi @Lanlanzzz
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
.header__menu-item:hover {
text-decoration: none!important;
}
.list-menu__item {
text-decoration: none;
}
</style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Thank you. After I copy and paste your codes, it still not working:(
Hi @Lanlanzzz Please replace the code you added with this new one
<style>
nav.header__inline-menu * {
text-decoration: none !important;
}
nav.header__inline-menu *:hover {
text-decoration: none !important;
}
</style>
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025