How to remove underline from footer links until mouse hover?

NgocLe1 · ‎04-18-2024

I inserted links for my footer menu, but all of them are underlined. Is there anyway we can make them only underline when hovering our mouse over them? Thank you!

PageFly-Henry · ‎04-18-2024

Hi @NgocLe1

This is Henry from PageFly - Landing Page Builder App

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 at bottom of the file -> Save

.multicolumn-card__info a {

text-decoration: unset;

}

.multicolumn-card__info a:hover {

text-decoration: underline !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

saim007 · ‎04-18-2024

Please provide store url?

Saim | Shopify Partner Expert

Was I helpful?

☕ Buy me a Coffee ☕

🙂
Hire me to unlock the full potential of your e-commerce store 🙂

NgocLe1 · ‎04-18-2024

https://2cb7cc-ab.myshopify.com/products/indoor-exercise-trampoline

Pass: testpage

ThePrimeWeb · ‎04-18-2024

Hey @NgocLe1,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.slider-mobile-gutter .rte a {
    text-decoration: none !important;
}

.slider-mobile-gutter .rte a:hover {
    text-decoration: underline !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

PageFly-Henry · ‎04-18-2024