How can I fix the mobile transparency issue with my logo header?

[weTAHO]

Hello,

I am currently building my store and i want my logo at the header to be transparent at the top of the homepage. I am currently using last version of debutify and the theme have a option to have a transparent header that changes when you scroll down. The problem is that the transparent header only works on desktop and not on mobile. I use SVG files for my logo header.

I have tried to edit the themes code but to no success, does anyone know if it is possible to accomplish?

Here’s my shop URL preview : https://7h0kfx8a4reo3h1r-66494365930.shopifypreview.com

Thank you and have a nice day !

[LitCommerce]

Hi @weTAHO ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media screen and (max-width: 769px) {
  .sticky-header.is-scrolling .site-header__logo .default-logo {
    display: block !important;
  }
  .sticky-header.is-scrolling .site-header__logo .mobile-logo {
    display: none !important;
  }
}

Hope it helps!

[Sphurti]

.sticky-header.is-scrolling.transparent-header–mobile .site-header {

1. background-color: transparent!important;

2. border-color: #444;

3. width: 100%;

4. }

5. add this code in theme.scss

6. if only for mobile

7. @media (max-width: 769px){

8. .sticky-header.is-scrolling.transparent-header–mobile .site-header {

   1. background-color: transparent!important;
   2. border-color: #444;
   3. width: 100%;
   4. }

9. }

10. make sure don’t miss the brackets

[weTAHO]

Hello @LitCommerce Thank you for your reply, one more question. I should paste it after %endif% line ? Under it ?

[weTAHO]

Just fixed it all. Thank you very much and have a nice day ! @LitCommerce

[LitCommerce]

Hi @weTAHO ,

Do you want me to check the last question?