Header in blogpost

Topic summary

Issue: The blog listing/show pages display the first post’s title as a header across all posts. The goal is to hide that heading.

Proposed fixes:

  • Theme.liquid approach: Add code near the end of theme.liquid before the tag to hide the heading (exact snippet not visible in the shared content). A screenshot shows the header removed.
  • CSS (desktop): In theme.css around line 1115, change the desktop rule “@media only screen and (min-width: 750px) { .section-header { margin-bottom: 55px; } }” to include “display: none !important;” so it becomes “.section-header { margin-bottom: 55px; display: none !important; }”. Screenshot confirms the result.

Mobile follow-up:

  • CSS (mobile): In theme.css around line 1112, modify “.section-header { margin-bottom: 35px; }” to “.section-header { margin-bottom: 35px; display: none !important; }”. Screenshot shows the header hidden on mobile.

Outcome/status:

  • Desktop solution acknowledged by the OP as working; mobile was initially unresolved, with a targeted CSS fix provided. Awaiting final confirmation from the OP. Screenshots and code snippets are central to the solution.
Summarized with AI on December 23. AI used: gpt-5.

Hi all,

does anybody have an idea, why it shows the title of my first blogpost as a header of all blogposts :disappointed_face:

I just added a new blogpost but in the menu it shows the header of first blogpost’s title…

my homepage is https://www.chumani-jewels.com/

Appreciate any help

Hey @chumani

If you don’t want to show the heading then you can do this.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like

Hello @chumani
Go to online store ---------> themes --------------> actions ------> edit code------->theme.css ----> line number 1115
search this code

@media only screen and (min-width: 750px) {
.section-header {
margin-bottom: 55px;
}
}

and replace with this code

@media only screen and (min-width: 750px) {
.section-header {
margin-bottom: 55px;
display: none !important;
}
}

result

If this was helpful, hit the like button and mark the job as completed.
Thanks

1 Like

Thank you for the quick solution :folded_hands:

Thanks… always there to help you…!!!

Hi @GTLOfficial again, the only thing is: it’s not working for the mobile version :disappointed_face: Do you know why?

Hello @chumani
Go to online store ---------> themes --------------> actions ------> edit code------->theme.css ----> line number 1112
search this code

.section-header {
  margin-bottom: 35px;
}

and replace with this code

.section-header {
  margin-bottom: 35px;
  display: none !important;
}

result

Thanks