Transparent header

Technical Q&A
,

Topic summary

Transparent header added in Shopify Dawn theme works on desktop but not on mobile; mobile header text/icons remained black instead of white.

Actions taken:

  • Store URL and password shared for inspection.
  • Code provided to insert into theme.liquid (after ) to fix mobile header colors; user confirmed it worked.
  • Additional CSS provided to center the desktop menu text; user confirmed success.
  • Further CSS suggested to address the mobile logo being hidden by the announcement bar.

Current status:

  • Mobile color issue and desktop menu alignment are resolved.
  • The logo overlap fix has been proposed; confirmation from the user is pending, so the thread remains open.

Notes:

  • Dawn is Shopify’s default theme; theme.liquid is the main layout file.
  • The announcement bar (top message banner) can overlay header elements, hiding the logo.
  • Code snippets are central to the solution; exact code content is not shown in the transcript.
Summarized with AI on December 26. AI used: gpt-5.
1

hello community ,
ust added the feature of the transparent header in DAWN theme with some coding ( from tutorials ) . it works very well on desktop version but in mobile one no .
the text and colors icone stays in black , putted them in white . ( easy explication ) .
anyone has a solution please? the assistance told me that it needs coding skills and i don’t know how to manage that .

2

Hi @guiguimorning

This is Amelia at PageFly - Shopify Advanced Page Builder app.

Could you please share the URL link of your store so we can check it for you?

3

##-themorningchoice.com -##

4

Hi @guiguimorning

Your store is password protected. Please provide the password so I can check and give you solution.

5

##- oh sorry, 1907 -##

6

Please add this code to theme.liquid file after in Online Store > Themes > Edit code
7

Just did it ! Thank you very much :folded_hands:

8

can i ask more one question please , i think no code needed but did not found the solution :
How to center the text menu ( in desktop ) , cause looks like going to left .
thx

9

Please add this addition CSS code
10

did it , thx

11

with this code in mobile version , the centred logo beame hidden by the announcement bar

12

Your logo is hidden by default without my code. But you can solve it by adding this additional code
1 Like