How can I fix the transparent header logo issue on Debutify theme?

[JiaTzengWang]

Hi, I'm trying to add my logo onto the Debutify theme. I select "transparent background" for my desktop header display but it still stays with the default font of the theme.

It isn't until I scroll down that I can see my uploaded logo properly. Is there any html fix to this?

[Ecommpremium]

can you please share the store URL?

@JiaTzengWang 

[dmwwebartisan]

@JiaTzengWang 

Please share store URL!

Thanks!

[JiaTzengWang]

Sent emails

[Ecommpremium]

you can share your website URL here so I can give you code to implement for header transparent background? @JiaTzengWang 

[JiaTzengWang]

URL: sleepezzentialz.myshopify.com

pass: sunny123

[dmwwebartisan]

@JiaTzengWang 

Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/theme.scss.liquid-->paste below code at the bottom of the file. 

.site-header__logo .inverted-logo {
    display: none !important;
}

Thanks!

[JiaTzengWang]

This works pretty well as it removes the default text font logo on the homepage. But it does not display the logo until user starts scrolling.

[JiaTzengWang]

I've done some work on the HTML wondering if the scripts affect each other.

//mobile transparent header
@media only screen and (max-width: 569px)
{
  
.header-section .header-container .product-form__cart-submit {
   position: absolute !important;
}
.site-header .product-form__cart-submit {
    background-color: transparent !important;
}
.is-scrolling .site-header .product-form__cart-submit{
    background: #6d6892 !important;
}

}



//remove header divider line
.site-header {border-bottom: none;}