Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Hi,
I am looking to remove the underline on the links on my store whenever you hover over them or click them.
This includes the menu links and also the collapsible content links.
My store for reference:
@mmmtrading
Hello,
.header__menu-item:hover span {
text-decoration: none;
}
.collapsible-content summary:hover .accordion__title {
text-decoration: none;
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css.
Step 3: Paste the below code according your requirement
span.header__active-menu-item {
text-decoration: none;
}
a{text-decoration: none !important;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
@mmmtrading - add this css to the end of your base.css file and check
a, a:hover, a:active, a:focus{text-decoration:none !important;}
.header__menu-item:hover span {text-decoration: none !important;}
Hello there,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:
.header__menu-item:hover span {
text-decoration: none;
}
.collapsible-content summary:hover .accordion__title {
text-decoration: none;
}
Hi @mmmtrading
This is Victor from PageFly - Landing Page Builder App.
You can try this code by following these steps:
.header__menu-item:hover span{
text-decoration:none !important
}
Hope my solution works perfectly for you!
Regards,
Victor | PageFly
If it’s helpful for you, please let me know by giving it a like or marking it as a solution!
PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.
All features are available from Free plan. Let’s create unique website design with PageFly here.
Shopify Invoice Generator by PageFly – Try It Free!.
It appears to remove the hover underline however when clicked it still shows the underline. Furthermore, there are also underlines on the account page that i would like to remove.
Any further help would be much appreciated.
Hi @mmmtrading,
You can replace old code with new code:
.header__menu-item span{
text-decoration:none !important
}
Hope my solution works perfectly for you!
Regards,
Victor | PageFly
If it’s helpful for you, please let me know by giving it a like or marking it as a solution!
PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.
All features are available from Free plan. Let’s create unique website design with PageFly here.
Shopify Invoice Generator by PageFly – Try It Free!.
User | RANK |
---|---|
135 | |
91 | |
77 | |
68 | |
43 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022