How do I remove the blog post title from the header image and put it in the text?

Lauren_Brooke
Tourist
4 0 2

Hello, our theme automatically puts the blog post title in a overlay over the header image, I would like to remove that and add it as a heading in the text. I know I could use display:none; to remove the title over the image and manually add an H1 as the title in the text, however we have loads of blog posts and I want something that will work across the board without having to go back and manually add the titles for all past blog posts.

Thanks-

 

 blog-post-title.jpg

KetanKumar
Shopify Partner
16953 1838 6344

@Lauren_Brooke 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lauren_Brooke
Tourist
4 0 2

Thank you, here is an example of one of our blog posts, we want the title at the top of the text instead of as an overlay on the image.

https://www.laurenbrookecosmetiques.com/blogs/blog-posts/5-colour-stick-secrets-for-a-gorgeous-look

Michele

0 Likes
KetanKumar
Shopify Partner
16953 1838 6344

@Lauren_Brooke 

thanks for details 

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

#shopify-section-template-article .flexible_block__overlay h1 {display: none;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lauren_Brooke
Tourist
4 0 2

Thank you, this removes the title from the header but doesn't add it to the top of the blog post as a heading.

Michele

0 Likes
KetanKumar
Shopify Partner
16953 1838 6344

@Lauren_Brooke 

do you mean like this?

KetanKumar_0-1619153637208.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lauren_Brooke
Tourist
4 0 2

Thanks so much, yes that definitely looks better, I was imagining it as a header in the text, so like this:

[image]

<h1>3 Secrets for a Gorgeous Colour Stick Look</h1>

<p>Creamy multi-sticks...</p>

But as you had it looks nice too. Thank you!

 

KetanKumar
Shopify Partner
16953 1838 6344

@Lauren_Brooke 

thanks or confrim yes is possible to change backend code and new custom code if you need this can you  please share store details on personal message so we have discuss 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing