How to make transparent header on all pages in dawn theme

Store Design
, , ,

Topic summary

A user successfully implemented a transparent header on their Dawn theme homepage but needs it to work across all pages.

Solutions provided:

  • Option 1: Add CSS code to base.css file:

    .header-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
}

    Navigate to Online Store → Theme → Edit code, locate base.css, and paste the code at the bottom.

  • Option 2: Use the same CSS snippet but with slightly different formatting (both solutions are essentially identical).

Key insight: The header is shared across all pages but pre-configured differently per page in the Dawn theme. The position: fixed property makes it transparent site-wide.

One response included a YouTube tutorial link for visual guidance. The issue appears solvable with straightforward CSS customization.

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

Hello! I have added a code to make my header transparent and it has worked but only on the home page. How can I change this to be transparent on all the pages? My website is https://shebangin.com/ and if there is a password it is “slate”. Thank you!

2

Hello @shebangin

Step 1: Go to Online Store → Theme → Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save

.header-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
}
3

Hi @shebangin

Because the header here is shared for all pages. The theme is pre-configured to fit each page, If you want the header on every page like the home page. You can use the following CSS

.header-wrapper{
   position: fixed;
   width: 100%;
}

Hope this helps you.

BSS Commerce - Shopify Apps & Development Services Provider - Shopify Expert

Level up your Shopify store with our B2B & B2C apps

4

Add transparent header: