Horizon Theme not showing the headers of an accordion menu. They're not invisible they're just not there

Technical Q&A
,
1

I have tried looking in the code and asking AI for help, but I can’t seem to find why nothing is showing up. In my code it shows the text is there and the color isn’t an issue. It won’t show up on mobile or desktop. All the text in the dropdown of the accordion shows up fine.

3

In Horizon, the title is the summary text, and the panel underneath is a separate block.

Your panel text shows but the titles do not. You have ruled out colour, so something is shrinking or hiding the title text itself. May be

  • a font-size: 0, or
  • height: 0, or
  • visibility: hidden, or
  • display: none rule left by custom CSS or an app.

I reproduced it on a Horizon store. One rule zeroed the titles while the panel text stayed:

Horizon accordion with the titles hidden
Horizon accordion with the titles hidden1410×640 29.9 KB

Check these first

  • Open the Accordion, click each row, and confirm the Heading field has your title. In Horizon the title lives in that Heading field, not in the blocks you put inside the row.
  • Look for custom CSS hiding it. Check Theme settings, any Custom Liquid or Custom CSS block, and any app added around the same time. Search your theme code for details__header, summary, or font-size:0.

Quick fix if you cannot find the source

Add a Custom Liquid block (or your theme’s Custom CSS box) with this. It forces the titles back on top of whatever is hiding them:

<style>
.accordion .details .details__header{
  font-size: 1rem !important;
  line-height: 1.35 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
</style>

Titles restored after one CSS rule
Titles restored after one CSS rule1410×640 30 KB

If they still stay hidden, paste your store link and I will point to the exact rule.

Regards,
Ajay

5

Tim from Sonder Sites in Melbourne. We spend a lot of time cleaning up Horizon after AI has been through it.

Ploqo is right that the title lives in the Heading field on each accordion row, not in the blocks inside the row. If that field is filled and the titles still do not render, stop prompting AI. It will keep rewriting CSS while the real rule is usually a leftover font-size: 0, height: 0, or display: none on .details__header or summary.

Duplicate the theme first. In the unpublished copy, search the theme code for details__header, font-size: 0, and any Custom CSS or app block added around the same time as the accordion. Comment that rule out. Do not add another !important layer on top until you know which rule is hiding it.

If you paste the store URL, or a screenshot of the accordion settings plus any Custom CSS, I can point to the exact rule. Happy to help.