Dawn Theme Transparent Header

Store Design
, ,

Topic summary

A user implemented transparent header code for the Dawn theme that works on the homepage but fails on other pages, displaying a white block instead.

Main Issue:

  • Transparent header only functions on homepage
  • Other pages show white background
  • User wants text to remain white globally
  • Doesn’t want sticky header behavior when transparency is enabled

Proposed Solutions:

CSS Placement:

  • Code likely placed in homepage-specific file rather than global CSS
  • Should be moved to global theme.liquid or base CSS files for site-wide application

Sticky Header Removal:

  • Navigate to Theme Customization → Header
  • Set Sticky Header to “None”

Transparency Implementation:

  • Access Theme Customization → Three Dots → Edit Code
  • Search for “header” folder and open “header.liquid”
  • Add CSS code at top: {% style %} header. { background: transparent !important; } {% endstyle %}

Status: Discussion remains open with multiple troubleshooting approaches suggested. User confirmed code was placed in global files but issue persists. Further diagnosis may require store URL and password access.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello, I hope someone can help me.

I found some code online to add a transparent header to my Dawn Theme.

It works on the homepage, but doesn’t work on other pages.

This is what happens:
Homepage:
works as needed

Screenshot 2024-11-17 at 16.01.43.png
Screenshot 2024-11-17 at 16.01.43.png1786×426 796 KB

Other Pages:

just a white block

Screenshot 2024-11-17 at 16.02.14.png
Screenshot 2024-11-17 at 16.02.14.png2936×676 172 KB

Please note; because I want the text to be white, it needs to work globally.

Also, I don’t want to header to be sticky if transparent, with this code it stays sticky regardless if the setting is switched on or not.

Open to new code that works responsively! Thank you :slightly_smiling_face:

2

Hello @meepmediauk , where did you place the code you found? If it only appears on the homepage, then you probably just need to place it in one of the global .css files in your theme.

3

HI @meepmediauk

Please provide your store URL and password so I can help you

Best,

Daisy

4

Hello @meepmediauk ,

To remove Sticky Header follow this steps,

  1. Go to Theme Customization, Select Header.
  2. Select Sticky Header to None. (refer the below picture.)

chethan025_1-1731766050094.png
chethan025_1-1731766050094.png311×625 23.2 KB

To make Header background Transparent Follow this steps.

  1. In Theme Customization page, Click on the Three Dots in upper left side, it should be after your Theme Name.

  2. Select Edit Code from the option, search for header and open header.liquid.

  3. chethan025_2-1731767006820.png
    chethan025_2-1731767006820.png642×477 34.8 KB

  4. Paste this Code at the top of the page.

{% style %}
  .header{
    background: transparent !important;
  }
{% endstyle %}​
  • Save and Preview your Website.

If this not worked please share your Website link and password, I’ll help you solve this problem, If It worked Please mark this as a Solution and like this reply.

Thank you,

5

Yes in global theme liquid and base css for design