Remove the underline from Brooklyn's headings/links?

Highlighted
Tourist
28 0 2

Hi, I was wandering how to remove the underlinr from the Brooklyn's theme links (headings). correct me if I'm wrong I don't know much about coding, but text decoration: none won't work since the links are css based?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
537 0 86

Hey there!

Savannah here from Shopify. :) 

I think I've got a code that will do the trick. Navigate to Online Store>Themes and select "Edit Code" on Brooklyn. Scroll down to your Assets folder, and select the theme.scss. Once there, scroll down to the bottom of the theme's coding and paste this: 

.rte .text-link{
  border-bottom:none;
}

Let me know if that does the trick!

Savannah | Social Care
support@shopify.com

Highlighted
Tourist
28 0 2

Yes that worked perfectly! Thanks a bunch :)

0 Likes
Highlighted
Tourist
28 0 2

Hi, thank you again for your help with this topic, but i noticed that when hovering over a link the underline goes back, any way to prevent this?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
537 0 86

Hey, Noam!

You can remove that function by adding this code to the bottom of the CSS: 

.template-page a:hover {
  border-bottom: none !important;
}

Let me know if you have any more questions!

Savannah | Social Care
support@shopify.com

0 Likes
Highlighted
Tourist
28 0 2

Tried it, still shows the underline :(

0 Likes
Highlighted
Shopify Staff
Shopify Staff
537 0 86

Hey again!

That's strange. Would you mind sending me a screenshot of the theme.scss where you've entered the coding?

Thanks so much!

Savannah | Social Care
support@shopify.com

0 Likes
Highlighted
Tourist
28 0 2

Sure thing

0 Likes
Highlighted
New Member
5 0 0

A few years late, but this worked for me. Add to the bottom of theme css. This will apply to all text links across the site, unless otherwise specified. (Sorry for not being able to post it as plain text right now, see pic for how it’s supposed to look.)

 

.rte .text-link {
  border-bottom: none;

  &:hover,
  &:focus {
    border-bottom: 0 none !important;
  }
}

2FE4B465-B22F-4BC3-9D53-2EA9656FF935.jpeg

0 Likes