Remove underline on hover from all links - debut theme

Highlighted
Excursionist
22 0 5

Hi, how do you adjust the hover on all links on a site? I am using the Debut theme. Currently, when you hover, it underlines the links. I want to remove the underline.

Also, if I'd like to change it so that on hover it is a different color, how would I do that? Thanks

0 Likes
Highlighted
Shopify Partner
1777 211 370

Hey Jenna!

Locate the following snippet in your assets/theme.scss.liquid file:

.product-card__title {
  border-bottom: 1px solid transparent;
  display: inline;
}

and remove the line:

border-bottom: 1px solid transparent;

Hope that helps!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
3 Likes
Highlighted
Community Moderator
Community Moderator
3252 245 557

Hi Jenna, 

Nick here from Shopify. 

Just to follow on from Sergiu's answer above about your question to change the color of the text after you hover over it also. 

Similar to above, you would need to go to the theme.scss.liquid file (Online store > Themes > Action > Edit Code > theme.scss.liquid) and add the following code to the bottom of it: 

.product-card__title:hover {
  color: #f00;
}

And you can adjust the color value where it says #f00 to the color code you would like then. 

Any other questions, don't hesitate to ask. ?

All the best, Nick

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
22 0 5

Neither of these really worked properly...

The first thing removed the underline from SOME things, for example, the product titles. But it did not remove the underline from the navigation.

The second thing, changing the color, didn't do anything at all :(

0 Likes
Highlighted
Excursionist
22 0 5

I tried adding this:

a:hover {
    /* Color goes here */
    color: #59AEF2 !important;
}

to the end of theme.scss.liquid, and that worked to add hover color to the navigation, but not to the product title links.

yikes, can't get anything to work across the board!

0 Likes
Highlighted
Community Moderator
Community Moderator
3252 245 557

Hi Jenna, 

Not to worry. If you want any further help with this directly, don't hesitate to reach out to our support team directly about this from the link here and our theme support team can take a look at this for you. Because your theme is Debut which was developed by Shopify, it means our team can help with it should you want. 

Don't hesitate to ask should you have any other questions about anything else here either. 

Cheers, Nick

Nick | Community Moderator @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Expert
9925 103 1764

It's worth noting that the underline - whilst it might not seem important - is there for accessibility. It makes it clearer that that it's a link and not just some coloured text.

If you are to remove the underline be sure to have considered that.

The link itself is controlled by the text-decoration property.

To take an existing example see:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

.plain {
  text-decoration: none;
}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Highlighted
Shopify Partner
24 0 4

For me, this fix removed underlines for the product titles when I look at Collections.  This happened to be the most important part where I wanted it removed from.  However, it didn't remove the underline for the nav links in the heading.

0 Likes
Highlighted
New Member
2 0 0

This doesn't seem to be a solution. I've tried it a couple of different ways and it's not working.

See my code below: theme.scss.liquid


.product-card__title {
display: inline;
font-family: $font-stack-header;
font-style: $font-style-header;
font-weight: $font-weight-header;
}

.product-card__title:hover {
color: #f00;
}


 

0 Likes