Add a line under collection headings/titles

[media_by_bec]

Hey all,

I’m wanting to add a decorative line under my collection titles in the same colour as the collection heading.

Any chance anyone knows how I can do this with code please?

Example pictured below, heading is Finders and Makers.

Thanks!

[oscprofessional]

Hello,
Please share your site url.
So that i can check and let you know the exact solution here.

[Ajaykaransharma]

Hello sir

Please share your link so I will sent you a solution

[media_by_bec]

@oscprofessional

https://thefairtraderstore.com.au/

[oscprofessional]

Hello @media_by_bec

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-collection-template h1 {
	text-decoration: underline;
}

Hope this will work for you

Thanks…

[media_by_bec]

Aweome thanks!!

Can I make the space between the words and line more?

[KetanKumar]

@media_by_bec

Thanks for update.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#shopify-section-collection-template h1, #shopify-section-collection-template .h1, #shopify-section-collection-template #shopify-product-reviews .spr-header-title, #shopify-product-reviews #shopify-section-collection-template .spr-header-title {
    text-decoration: none;
    padding-bottom: 10px; /*if you need more spacing chang the value*/
    border-bottom: 2px solid;  /*if you need more thin chang the value*/
    display: inline-block;
}

[media_by_bec]

Awesome thanks @KetanKumar !

However the h1 is now not center…tried to add centre code and cant work it out sorry?

[KetanKumar]

@media_by_bec

oh, sorry 1 code are missing please add below code

.section-header {
text-align: center;
}

[media_by_bec]

@KetanKumar that worked, however its moving all my section headers, these (pictured below) section headingson my homepage I want alined left, they are h2’s if that helps with code? Sorry, but thanks!!!

I’ve deleted all previous/above codes

[KetanKumar]

@media_by_bec

Yes, sure,

add below code

.collection-template-section {
.section-header {
text-align: center;
h1 {
{
text-decoration: none;
    padding-bottom: 10px; /*if you need more spacing chang the value*/
    border-bottom: 2px solid;  /*if you need more thin chang the value*/
    display: inline-block;
}
}
}
}

[_peacefullife]

Hello all.

I have the same issue but with Dawn theme. I need to add an underline under my title page for my products. Please help me if possible. Thanks!