Solved

Transparent header on Dawn Theme 2.0

Dike
Pathfinder
105 1 41

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:

- Transparent heading
- Heading text and button moved lower similar to this: https://imgur.com/xpzPTXT

Any help would be greatly appreciated!

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

Thank you!

Accepted Solution (1)

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

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.

View solution in original post

Replies 7 (7)

dmwwebartisan
Shopify Partner
12280 2546 3693

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jg6
Tourist
3 0 1

@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.

dmwwebartisan
Shopify Partner
12280 2546 3693

@jg6 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jg6
Tourist
3 0 1

43C88875-195A-4332-B08D-A2A9430D63E5.jpeg

2CE2B455-494D-4A15-9726-328F5EE7BD16.jpeg

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.

made4Uo
Shopify Partner
3804 713 1124

Hi @jg6 

 

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

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.

Dike
Pathfinder
105 1 41

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.