Sub Menu Capital letters in green color and bold

Store Design

Topic summary

Goal: Apply green color (#5bb899) and bold styling to the first capital letters of submenu titles (PROYECTOS, COLABORADORES) and language items, matching the main header menu.

Current implementation: CSS with ::first-letter is placed in theme.liquid targeting header menu spans. Languages reportedly show green initials, but submenu titles do not. Moving CSS to base.css/style.css/theme.css did not resolve it.

Suggestions and issues:

  • One suggestion was to remove ::first-letter (which would style entire text, not just initials), conflicting with the stated “capital letters” intent.
  • A proposed selector “.header__submenu .header__menu-item font:first-letter” appears invalid (uses a non-existent font element and includes typos), so it didn’t work.
  • Attempts to inject CSS before were suggested, but shared code blocks were empty, so no verifiable change.
  • Multiple requests were made for the specific header dropdown template code to wrap text in span (or ensure a span exists) so ::first-letter can be targeted reliably.

Status: Unresolved. Submenu title initials still not styling.

Next steps:

  • Share the header dropdown menu file code (e.g., header-drop-down-menu.liquid) so spans can be added around link text.
  • Fix selectors to match actual markup (e.g., .header__submenu .header__menu-item a span::first-letter).
  • Decide if only initials or entire labels should be styled and place final CSS in a loaded stylesheet.
Summarized with AI on December 17. AI used: gpt-5.
10

Hi Namphan,

Thank you for your interest.

Here is the code that it is at the moment in the layout/them.lquid above head.

li > header-menu > details > summary >span::first-letter { color: #5bb899!important; font-weight: bold!important; } li > a > span::first-letter { color: #5bb899!important; font-weight: bold!important; }