How to remove underline from footer links until mouse hover?

Solved

How to remove underline from footer links until mouse hover?

NgocLe1
Excursionist
70 0 2

Screenshot 2024-04-17 233500.png

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!

Accepted Solution (1)

PageFly-Henry
Shopify Partner
1184 335 296

This is an accepted solution.

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

Replies 5 (5)

saim007
Shopify Partner
609 74 104

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
Excursionist
70 0 2

ThePrimeWeb
Shopify Partner
2139 616 520

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.

ThePrimeWeb_0-1713451649472.jpeg

 

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
Shopify Partner
1184 335 296

This is an accepted solution.

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.

NgocLe1
Excursionist
70 0 2

Thank you very much!