Debutify Theme logo isn't inverting when I change page

Store Design
1

In my website I have a homepage and a shop page. In the home page I need my logo to be white and in the shop page I need it to be black.

The debutify theme gives me three options for logos - default, inverted and mobile

The logo works fine when on desktop but on mobile it doesn’t work it only stays as whatever I put the mobile logo option as

1 Like
2

@Jamie0543

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Thank you very much my url is

Swirl-head.com

1 Like
4

@Jamie0543

can you please provide screenshot further issue?

5

Hey im having the same issue, did u figure out how to fix it?

1 Like
6

@og4

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!

Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

7

In theme.scss.liquid,

  1. Comment out “@include screenUp($postSmall) {” here:
    /* @include screenUp($postSmall) { */
    // Show default logo - hide inverted logo
    .site-header__logo {
    .default-logo {
    display: block;
    }

.inverted-logo {
display: none;
}
}
/* } */
}

  1. Comment the mobile logo block here:
    // Hide default and inverted logo - show mobile logo
    /* .site-header__logo {
    .default-logo {
    display: none;
    }

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

.mobile-logo {
display: block;
} */

8

Could you explain what you’re doing? When I look up “@include screenUp($postSmall) {” I see multiple results. Which one do I replace? Where do I place the second lines of code (mobile logo block)?

9

SOLVED - Debutify 5.01

  1. Go to the Theme > Edit Code

  2. Open the theme.scss.liquid

  3. click in the code and search - keyboard shortcut STRG+F or CMD+F

Search: Show default logo - hide inverted logo (in my case line 5953)
4. Replace the the code with the code above from USER Xcorpllc in step 1 - for more details you can ask chatgpt “What means “comment out” for cosing?”

  1. Search: Hide default and inverted logo - show mobile logo (in my case line 5982)
  2. Replace the the code with the code above from USER Xcorpllc in step 2