How to add a transparent header on Dawn Theme 2.0?

Store Design

Topic summary

Main topic: Make the Dawn 2.0 header transparent and adjust the hero/banner text position.

Key solutions shared:

  • Transparent header: Add CSS in base.css to make the header wrapper absolute, full-width, and transparent.
  • Move banner text down and remove box background: Add CSS in section-image-banner.css (desktop-only) to shift banner content down ~75px and set the banner box background to none.

Outcomes:

  • The banner text/background solution worked perfectly for the original requester. The transparent header snippet was noted for future use.

Follow-up request:

  • Another member wanted the header transparent only on the homepage while keeping it sticky (fixed during scroll) and standard white on other pages. They provided screenshots illustrating current vs. desired designs.
  • A contributor shared a short video with code that accomplishes homepage-only transparency and supports a sticky header.

Status:

  • Original customization resolved.
  • Homepage-only, sticky header variant appears addressed via the video, though no confirmation yet.

Notes:

  • Images and a video tutorial are central to understanding the target design and implementation.
  • “Sticky header” means the header remains fixed at the top while scrolling.
Summarized with AI on February 23. AI used: gpt-5.
1

Hello everyone,

I’m currently working on my first ever Shopify store and I was wondering how I could add these design elements as I don’t see the option to do so:

Any help would be greatly appreciated!

URL: https://glowee-cosmetics.myshopify.com/
Password: heading

Thank you!

1 Like
2

@Dike

Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/base.css–>paste below code at the bottom of the file.

.header-wrapper {
    display: block;
    position: absolute !important;
    background-color: transparent !important;
    width: 100%;
}

Thanks!

1 Like
3

Hii, @Dike
Paste this code on top of the section-image-banner.css file.

@media only screen and (min-width: 992px) {
.banner__content.banner__content--flex-end.page-width {
    position: relative !important;
    top: 75px !important;
}
}
.banner__box.color-background-1 {
    background: none !important;
}

Thank You.

4 Likes
4

Thank you both so much!

Zworthkey’s code is absolutely perfect. dmwwebartisan’s was great too, but I worded the title wrong but the transparent header code will definitely be used for future designs.

1 Like
5

@dmwwebartisan I used the code it turned my my header transparent on all my pages. How to I code it only for my homepage plus I want my header and to be still (sticky)…the goal for me is to have more of a boundless theme header.

1 Like
6

@jg6

Please share your store URL & a screenshot what do you want!

Thanks!

7

43C88875-195A-4332-B08D-A2A9430D63E5.jpeg
43C88875-195A-4332-B08D-A2A9430D63E5.jpeg1242×1051 49.7 KB

2CE2B455-494D-4A15-9726-328F5EE7BD16.jpeg
2CE2B455-494D-4A15-9726-328F5EE7BD16.jpeg1242×615 29.3 KB

Ok so my I currently have my password page up but the I want my homepage to be the only header to be transparent(such as the picture marked in green) I want the rest of my page headers to be normal white. The picture marked in red is my current homepage & the picture marked in green is my desired homepage design.

8

Hi @jg6

I made this short and simple code to do the job. Works with sticky header too. Check the video for more info