Transparent header on Dawn Theme 2.0

Solved
Dike
Excursionist
61 0 23

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)

Accepted Solutions
Zworthkey
Shopify Partner
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

Replies 3 (3)
dmwwebartisan
Shopify Partner
9824 2237 3078

@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 | Bag is a cart drawer that maximizes your sales. View app →
Zworthkey
Shopify Partner
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

Dike
Excursionist
61 0 23

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.