Menu Logo

[katbuddies]

 

Hey guys does anyone know how do i change my Logo Color in menu to black because i am having transparent logo/white when i go to menu on mobile its stays white

I try code in custom css but it didnt worked 

this is my site : https://katbuddies.shop

[BSSCommerce-B2B]

Hi @katbuddies , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media screen and (max-width: 768px) {
  .section-header .header-wrapper .header__heading-logo {
    filter: unset !important;
  }
}

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[katbuddies]

 i just put the code and its still stays white

[BSSCommerce-B2B]

Hi @katbuddies , 

Sr about previous comment don't helps.

You can try this code below: 

Search for the file theme.liquid. And add this code snippet before tag </head> or </body>: 

<style>
@media screen and (max-width: 768px) {
  .header__heading-logo-wrapper .header__heading-logo {
    filter: none !important;
  }
}
</style>

I was add this css snippet on style in inspector view web (f12) for test and your logo will be change.

Hope it helps! 

[katbuddies]

sorry not working, now is always black

But i have already codes for header could you check it up?

[BSSCommerce-B2B]

Hi @katbuddies , 

Thank you for your specific feedback.

So, you only want the logo to change to black when the sidebar appears. In that case, try the following code in base.css: 

@media screen and (max-width: 768px) {
.header:has(.menu-drawer-container.menu-opening) .header__heading-logo-wrapper .header__heading-logo {
    filter: none !important;
}
}

The result will be: 

I hope this instructions will help you. 

If they are helpful, please give us likes and mark as the solution.

Thanks in advance! 

[Made4uo-Ribe · Accepted solution]

Hi @katbuddies 

Check this one..

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media only screen and (max-width: 989px){
sticky-header:has(.menu-opening).header-wrapper .header__heading-logo {
    filter: invert(0); 
}
}
</style>

And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[katbuddies]

Thank you so much this one work!

[Made4uo-Ribe]

Welcome! Would you mind hitting 'like' as well? Thanks!