How do I make header transparent? (Dawn Theme)

Store Design

Topic summary

  • Goal: Make the Shopify Dawn theme header transparent at all times.

  • Proposed approach: Edit the theme’s CSS.

    • Navigation: Online Store → Theme → Edit code → Assets → base.css.
    • Add at the end of base.css: sticky-header.header-wrapper { background-color: transparent !important; }

  • What it does: Forces the sticky header wrapper’s background to be transparent across the site by overriding default styles with !important.

  • Status: A single step-by-step solution was provided; no confirmation from the original poster. Discussion outcome not fully verified and may remain open.

Summarized with AI on December 28. AI used: gpt-5.
1

How do I make my header on dawn theme transparent all of the time?

2

Hi @PM98 ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/base.css
  2. Add code below to end of file
sticky-header.header-wrapper {
  background-color: transparent!important;
}