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

Store Design
1

Hi,

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

Anyone that can tell me what todo? :slightly_smiling_face:

//JOhan

2

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

3

Hi @Zworthkey

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

www.sorun.se

Thanks!

/ Johan

4

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

5

Has anyone figured this out? I have the same question

6

Not yet. Let me know if you do! :slightly_smiling_face:

7

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.

8

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

9

Hi!

Thanks for your support!

www.Sorun.se, no password.

10

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
}
}
3 Likes
11

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

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

12

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;
}
}
13

Hi!

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

//Johan

14

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!

15

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;
}
16

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

17

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

18

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.

1 Like
19

hello @HJF

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

20

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?