How to add a transparent header on Dawn Theme 2.0?

Store Design
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