Header Menu Text Colour Changes

[HYBRID]

Hi

I have included two screenshots to better describe my issue. On my home page, the header menu text is white, as is my logo. This is fine as it contrasts with the background and can be seen. If you click onto any other page, the background chages to white (the standard colour theme), the header menu text changes to black but my logo stays as white and can't be seen.

Is there a way of keeping my home page logo white (as it is now) but chaging it on all other "white" pages to black so it matches the other text and can be seen.

Thanks in advance

[Manoj_j]

Hi @HYBRID ,

Yes, you can achieve this by using CSS and liquid custom code in your Shopify theme. you can keep your logo white in home page and make it black on other pages. share your store url and  password ( if password protected ).
Thanks 
Manoj

[HYBRID]

Thanks

Could you please explain how to do this without the need for me giving the website details? I was scammed by a developer on here recently and I'm afraid my trust has been affected

[Manoj_j]

Hi @HYBRID ,

you can report that scammer .  
report here  https://help.shopify.com/

[HYBRID]

Thank you, I'll do this. I know they are still active on here so hopefully something is done

[HYBRID]

can you help with this please?

[Sivadarshan]

@HYBRID, Please follow these steps.

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> 
Step 4: Upload the logo on content > files > upload logo file

Step 5: Copy the logo link and replace the URL completely

{% if template != "index" %}
  <style>
   .header__heading-logo{
    visibility: hidden;
}

a.header__heading-link.link.link--text.focus-inset {
    background: url(https://cdn.shopify.com/s/files/1/0648/2621/2600/files/IMG_4386.png?v=1654756530);
    background-size: 160px;
    background-repeat: no-repeat;
    background-position: center;
}
  </style>
{% endif %}

If this code works don't forget to like and accept the answer

[HYBRID]

Thank you

Just to confirm, this will change the logo on the pages other than the Home Screen? The home screen will remain the same (which I would like)

[HYBRID]

Unfortunately, that didn't work. Here's the code and where I've copied it

This is line 122 - 144 (if that matters)

{% comment %} Image markup used when building product grid item via JS {% endcomment %}
<template id="predictiveImageMarkup">
<image-element>
<img width height src loading="lazy" sizes="(min-width: 769px) 100px, 60px">
</image-element>
</template>
{% if template != "index" %}
<style>
.header__heading-logo{
visibility: hidden;
}

a.header__heading-link.link.link--text.focus-inset {
background: url(https://cdn.shopify.com/s/files/1/0832/7505/5449/files/Black_Logo_Transparent_Background.png?v=17429...);
background-size: 160px;
background-repeat: no-repeat;
background-position: center;
}
</style>
{% endif %}
</body>
</html>