How to make my logo invertable on mobile, the same as it is on desktop

Shopify Discussion
1

Hello I would like to invert my logo on mobile the same way it inverts on desktop.

I cannot upload the inverted logo for mobile through the theme. is there a custom way to do so?

website: https://4bubs.com/

password: timo23

Thank you for all the help!

2

Hi @timo23 If you want the same logo on the mobile as of desktop you can add this code so that the same logo will show on the mobile as well.

Please add this code

Please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.liquid in the code in left hand side in your theme.
  6. Add the following code in the bottom of the file above tag

Result:

sahilsharma9515_0-1729666346421.png
sahilsharma9515_0-1729666346421.png654×334 213 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

You are getting an issue with style of your site.

Screenshot 2024-10-23 at 14.05.21.png
Screenshot 2024-10-23 at 14.05.21.png2858×1822 493 KB

4

I was just trying to add the code the person above posted. Have been fixed now.

5

This does not seem to work.

do not have theme.liquid . Either theme.js.liquid or theme.min.js.liquid or theme.scss.liquid

6

Hi @timo23 Its pretty strange that you don’t have theme.liquid and you have other theme files.

No issues you can add the code in the in css files just Search theme.css/base.css/index.css/style.css and add the code in the end.

here is the updated code:

@media screen and (max-width: 769px) {
    .site-header__logo .inverted-logo {
        display: block !important;
    }

@media screen and (max-width: 769px) {
    .site-header__logo .mobile-logo {
        display: none;
    }
}

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

7

Which css files, how do I search these?

Sorry I’m a total noob when it gets to these

8

@timo23 Can you please specify what theme you are using? Also if you are not able to find css file you can add the above code in scss file.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

9

I have found the theme.liquid and have added the code you have said.

However on the mobile it only shows the inverted logo and not the normal one, once I scroll pass.

10

I’m using Debutify theme.

I have found the theme.liquid and have added the code you have said.

However now it shows inverted logo all the time, and it doesnt swap back to normal logo.