How to make header transparent on mobile in Dawn theme

[Lisavdijk]

Dear all,

Question about Dawn theme, I've followed an tutorial on Youtube for a transparent header in dawn theme which is only made for desktop and not on mobile.

on desktop it works perfectly, just as I want, but my question is, how can I change the code so it works also on mobile version.

Website: https://b6c7e8-65.myshopify.com/

Pass: test

It's not an shop, it will be a standard website for grooming.

In case you need anything from my site, please let me know, would love to have this working.

Kind regards,

Lisa,

[BSS-TekLabs · Accepted solution]

- Here is the solution for you
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media only screen and (max-width: 990px) {
    .header-wrapper {
        background: transparent !important;
        position: absolute !important;
        width: 100% !important;
        top: 0px;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs · Accepted solution]

I have added code there, please check it @Lisavdijk .

[BSS-TekLabs · Accepted solution]

Line 222 to 229

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @Lisavdijk .

[BSS-TekLabs · Accepted solution]

@media (max-width: 767px) {
.scrolled-past-header .header__heading-logo-wrapper.desktop {
    display: none !important;
}
    .header__heading-logo-wrapper.desktop {
        display: block !important;
    }
.header__heading-logo-wrapper.mobile {
    display: none !important;
}
}

[BSS-TekLabs · Accepted solution]

I have added code from line 109 to 116 you can try it @Lisavdijk .

[BSS-TekLabs · Accepted solution]

Im updated code line 109 to 119 @Lisavdijk 

[BSS-TekLabs · Accepted solution]

Please check it 

- Please press 'Like' and mark it as 'Solution' if you find it helpful @Lisavdijk . Thank you.

[BSS-TekLabs · Accepted solution]

I am updated the code. please check it @Lisavdijk 

[BSS-TekLabs · Accepted solution]

@media (max-width: 767px) {
.scrolled-past-header .header__heading-logo-wrapper.desktop {
    display: none !important;
}
    .header__heading-logo-wrapper.desktop {
        display: block !important;
    }
.header__heading-logo-wrapper.mobile {
    display: none !important;
}
.scrolled-past-header .icon-hamburger path {
    fill: black !important;
}
.icon-hamburger path {
    fill: white !important;
}
}

[BSS-TekLabs · Accepted solution]

Glad to help you. Have a good day @Lisavdijk .

[BSS-TekLabs · Accepted solution]

Ok. let me check it

[BSS-TekLabs · Accepted solution]

@media only screen and (max-width: 600px) {
.overflow-hidden-tablet .header-wrapper {
    background: white !important;
}
.overflow-hidden-tablet .header__heading-logo-wrapper.desktop {
    display: none !important;
}
.overflow-hidden-tablet .header__heading-logo-wrapper.mobile {
    display: block !important;
}
}

Im add code to line 222 to 232 please check it @Lisavdijk 

[BSS-TekLabs · Accepted solution]

No problem. If you need any help just ask.

[BSS-TekLabs · Accepted solution]

{% if template != 'index' %}
  <style>
    .header-wrapper {
    background: white !important;
}
  </style>
{% endif %}

Im add code to line 223 to 229, please try this @Lisavdijk 

[BSS-TekLabs · Accepted solution]

{% if template != 'index' %}
  <style>
    .header-wrapper {
    background: white !important;
}
  </style>
{% endif %}

Can you replace to this code @Lisavdijk 

{% if template != 'index' %}
  <style>
    .header-wrapper {
    background: white !important;
}
.icon-hamburger path {
    fill: black !important;
}
  </style>
{% endif %}

[BSSCommerce-B2B]

@Lisavdijk , Add this code above </head> tag in theme.liquid file

<style>
.header-wrapper{
    background: transparent !important;
    position: absolute !important;
    width: 100% !important;
    top: 0px;
}
</style>

Result:

[BSS-TekLabs · Accepted solution]

- Here is the solution for you
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media only screen and (max-width: 990px) {
    .header-wrapper {
        background: transparent !important;
        position: absolute !important;
        width: 100% !important;
        top: 0px;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Lisavdijk]

Hi all,

Thank you for your replies,

is there any chance that I can add my header file from edit code here, so we can make the adjustments there?

as this is a sticky header, when you scroll down background changes to white and logo changes to black text instead of white.

this is my header.liquid code

https://paste.ofcode.org/Vmz9Y3HEZCCv8nm2eisPkc

Thank you all in advance.

Kind regards,

Lisa

[BSS-TekLabs · Accepted solution]

I have added code there, please check it @Lisavdijk .

[BSS-TekLabs · Accepted solution]

Line 222 to 229

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @Lisavdijk .

[Lisavdijk]

Hi Teklabs,

Many thanks, this worked for mobile, but is there a chance to add my white logo when it's not scrolled, and when you scroll the black logo?

like the desktop version?

also if possible, the hamburger is in black, is it possible to make it white, and when you scroll back to black?

appreciate your great help 🙂

Kind regards,

Lisa

[BSS-TekLabs · Accepted solution]

@media (max-width: 767px) {
.scrolled-past-header .header__heading-logo-wrapper.desktop {
    display: none !important;
}
    .header__heading-logo-wrapper.desktop {
        display: block !important;
    }
.header__heading-logo-wrapper.mobile {
    display: none !important;
}
}

[BSS-TekLabs · Accepted solution]

I have added code from line 109 to 116 you can try it @Lisavdijk .

[BSS-TekLabs · Accepted solution]

Im updated code line 109 to 119 @Lisavdijk 

[Lisavdijk]

Hi Teklabs,

many thanks, was about to say that is wasn't working as it should, but now it does 🙂

In case you want me to help out, is it also possible to make this menu hamburger white when it's not scrolled, and black when it's scrolled?

Once again, im really thankful for your great help 🙂

with my OCD, i need to get this fixed to get rest in my head haha

Kind regards,

Lisa,

[BSS-TekLabs · Accepted solution]

I am updated the code. please check it @Lisavdijk 

[BSS-TekLabs · Accepted solution]

@media (max-width: 767px) {
.scrolled-past-header .header__heading-logo-wrapper.desktop {
    display: none !important;
}
    .header__heading-logo-wrapper.desktop {
        display: block !important;
    }
.header__heading-logo-wrapper.mobile {
    display: none !important;
}
.scrolled-past-header .icon-hamburger path {
    fill: black !important;
}
.icon-hamburger path {
    fill: white !important;
}
}

[BSS-TekLabs · Accepted solution]

Please check it 

- Please press 'Like' and mark it as 'Solution' if you find it helpful @Lisavdijk . Thank you.

[Lisavdijk]

Hi Teklabs,

Appreciate your help, it works just as I want, really appreciate the effort and quick answers.

Kind regards,

Lisa

[BSS-TekLabs · Accepted solution]

Glad to help you. Have a good day @Lisavdijk .

[Lisavdijk]

Hi Teklabs, once again,

apologies, maybe asking too much, but upon checking i noticed when you press menu it shows as below picture

Any chance that we can make header back ground white and logo black when they press menu without past header?

Sorry for additional step.

Kind regards,

[BSS-TekLabs · Accepted solution]

Ok. let me check it

[BSS-TekLabs · Accepted solution]

@media only screen and (max-width: 600px) {
.overflow-hidden-tablet .header-wrapper {
    background: white !important;
}
.overflow-hidden-tablet .header__heading-logo-wrapper.desktop {
    display: none !important;
}
.overflow-hidden-tablet .header__heading-logo-wrapper.mobile {
    display: block !important;
}
}

Im add code to line 222 to 232 please check it @Lisavdijk 

[Lisavdijk]

Hi, 

Ur the best, thank you once again for helping me out,

Kind regards,

Lisa

[BSS-TekLabs · Accepted solution]

No problem. If you need any help just ask.

[Lisavdijk]

Hi Teklabs, once again 🙂

Can you make it so, that it's only transparent in homepage and not other pages,

I've just noticed that the header is overlapping on mobile, but not on desktop

[BSS-TekLabs · Accepted solution]

{% if template != 'index' %}
  <style>
    .header-wrapper {
    background: white !important;
}
  </style>
{% endif %}

Im add code to line 223 to 229, please try this @Lisavdijk 

[Lisavdijk]

Hi, Thank you,

almost perfect, only the hamburger on another page is still white when not scrolled, after that it's done i think 🙂 

[BSS-TekLabs · Accepted solution]

{% if template != 'index' %}
  <style>
    .header-wrapper {
    background: white !important;
}
  </style>
{% endif %}

Can you replace to this code @Lisavdijk 

{% if template != 'index' %}
  <style>
    .header-wrapper {
    background: white !important;
}
.icon-hamburger path {
    fill: black !important;
}
  </style>
{% endif %}

[Lisavdijk]

You made my day, appreciate all your effort, many many thanks.

[BSS-TekLabs · Accepted solution]

Glad to help you. Have a good day.

[Gilmerark]

Hello, I have the same problem, I have the minimog theme and it already has the option to make the header transparent, but it only works on desktop. I would like to have it in the mobile version as well, but I tried the code you recommended, but it didn't work