Debutify Transparent header logo issue

JiaTzengWang
Tourist
7 0 2

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.

Screen Shot 2021-10-26 at 8.13.31 PM.png

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

Screen Shot 2021-10-26 at 8.13.22 PM.png

Replies 8 (8)

Ecommpremium
Shopify Partner
512 43 92

can you please share the store URL?

@JiaTzengWang 

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website

dmwwebartisan
Shopify Partner
12269 2546 3692

@JiaTzengWang 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JiaTzengWang
Tourist
7 0 2

Sent emails

Ecommpremium
Shopify Partner
512 43 92

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

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
JiaTzengWang
Tourist
7 0 2

URL: sleepezzentialz.myshopify.com

pass: sunny123

dmwwebartisan
Shopify Partner
12269 2546 3692

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JiaTzengWang
Tourist
7 0 2

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
Tourist
7 0 2

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