How can I create a transparent header with the Dawn theme?

[JEnander]

Hi, 

Ím looking to use the theme Dawn and would like to have a transparent header. 

Anyone that can tell me what todo? 🙂

//JOhan

[Zworthkey]

hii, @JEnander 
Kindly share your store URL so,
I can solve your problem.
Thank You.

[JEnander]

Hi @Zworthkey 

Store is till password protected, will I need to unlock open it first?

www.sorun.se

Thanks!

/ Johan

[wearemkls]

I'd like to know this too! Would like my main image to extend behind the header - is that possible?

[newbieka]

Has anyone figured this out? I have the same question

[JEnander]

Not yet. Let me know if you do! 🙂

[Kinjaldavra]

hello @wearemkls , @JEnander  , @newbieka 

Please provide the website URL and if your store is password protected then also provide a password So I will check and provide a solution here.

[newbieka]

@Kinjaldavra does it work if I share a preview? https://sna59sp6xm40d57c-54010118319.shopifypreview.com

[JEnander]

Hi! 

Thanks for your support!

www.Sorun.se, no password. 

[Kinjaldavra]

hello @JEnander  and @newbieka 

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 1024px) {
.header-wrapper {
    position: relative;
}
.gradient {
    background: transparent;
}
.banner__media.media {
    position: absolute;
    top: -90px;
}
.banner::after {
    top: -90px;
}
.header__menu-item {
    color: #ffffff;
}
.header__icon svg{
    fill: #ffffff
}
}

[magmar]

Hey! It works, but there's still a blank space above.

Preview: https://t8vpapp6wiixgmpn-4802412642.shopifypreview.com

[Kinjaldavra]

hello @magmar 

Remove space use below code please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 1024px){
.banner__media.media {
    position: absolute;
    top: -126px !important;
}
}

[newbieka]

Hi @Kinjaldavra Thank you for looking into this! This worked on desktop view but not mobile. And on Desktop, I believe, it might have changed the announcement bar. I can no longer choose I color for it on desktop but I can on mobile. And do want an announcement bar.

Thanks again!

[Kinjaldavra]

hello @newbieka 

for both mobile and desktop  Transparent header  please remove my old code and insert below code

.header-wrapper.color-background-1.gradient{
   position: relative;
    background: transparent;
}
#shopify-section-template--14167264985197__image_banner .banner__media.media{
    position: absolute;
    top: -140px;
}
#shopify-section-template--14167264985197__rich_text .rich-text.color-background-1 {
    margin-top: -80px;
}
@media screen and (min-width: 750px){
#shopify-section-template--14167264985197__image_banner .banner__box {
    position: absolute;
    bottom: 120px;
}

[newbieka]

Thank you @Kinjaldavra! Unfortunately, that didn't work.

[JEnander]

Hi!

Thanks! It works fine for me. I will test and see if it works with the other design elements 

//Johan

[HJF]

Thanks for the solution @Kinjaldavra . This seems to leave a big padding at the bottom of my banner. Any idea on how to fix this? https://habibco.com

[made4Uo]

Hi

@HJF If you want just have a transparent header and still able to use the sticky header. Try this code. The code is best if you want the image in the home page to be the background or whatever section you want to be the background. This only applies in the home page. It will be weird to have a transparent header in other pages. 

[Kinjaldavra]

hello @HJF 

can you please share a screenshot of which banner leave big padding at the bottom

[kalebgookins]

this code works perfectly - however, I would like a solid color announcement bar. How can this be modified to not make the announcement bar transparent?

[Sikandar253]

Your code works fine for the transparent header but it applies on all pages I need a transparent header only on the home page and a default header for the rest of the pages. Thanks