Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Transparent header using Dawn theme

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

JEnander
New Member
7 0 0

Hi, 

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

Anyone that can tell me what todo? 🙂

//JOhan

Replies 20 (20)

Zworthkey
Shopify Partner
5581 642 1583

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

JEnander
New Member
7 0 0

Hi @Zworthkey 

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

www.sorun.se

 

Thanks!

 

/ Johan

wearemkls
Tourist
9 0 6

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

newbieka
Tourist
6 0 1

Has anyone figured this out? I have the same question

JEnander
New Member
7 0 0

Not yet. Let me know if you do! 🙂

Kinjaldavra
Shopify Partner
2303 570 1426

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
Tourist
6 0 1
JEnander
New Member
7 0 0

Hi! 

Thanks for your support!

www.Sorun.se, no password. 

Kinjaldavra
Shopify Partner
2303 570 1426

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
Shopify Partner
4 0 0

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

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

Kinjaldavra
Shopify Partner
2303 570 1426

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
Tourist
6 0 1

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
Shopify Partner
2303 570 1426

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
Tourist
6 0 1

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

JEnander
New Member
7 0 0

Hi!

 

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

 

//Johan

HJF
Visitor
2 0 1

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
Shopify Partner
3856 717 1198

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. 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Kinjaldavra
Shopify Partner
2303 570 1426

hello @HJF 

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

kalebgookins
Visitor
1 0 0

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
Shopify Partner
5 0 2

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