Different menu-colors on landing page and all other pages (e.g. product pages)

[Frede]

Hello! I'm using Dawn Theme and I have a dark picture behind my main menu on the very top of my landing page. Thus, I changed the menu color into white to ensure easy readability. However, all other pages (e.g. the product pages) have a white background. On this white background the white color of the menu is not visible.

How can I set a color for the menu on the landing page without changing the color of the menu on all other pages?

This is my landing page (needs white menu color)

This is a product page (needs black menu color)

Thank you so much for your help!!!

[B2Bridge]

Hi @Frede 
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Frede]

Sure: https://bhgfrp-rx.myshopify.com/

[suyash1]

@Frede  - please add this css to the very end of your theme.liquid file  before </body>
Shopify Admin -> Online Store ->Theme -> Edit code -> theme.liquid

{% if template.name == "index" %}
<style>
.header__menu-item span{color:#000;}
</style>
{% endif %}

[Frede]

Dear Suyash1,

thank you very much for your quick help. I have added the code. However, the menu color on the landing page remains black.

What did I make wrong?

[suyash1]

@Frede  can you please share your website link? let me check if it is getting applied or not

[Frede]

I shared it already: https://bhgfrp-rx.myshopify.com/

[suyash1]

@Frede change the color code in my code to #fff, by mistake I gave code for black color only

so it becomes 

.header__menu-item span {
    color: #fff;
}

[Frede]

This is so great! Thank you! However, I also need the icons on the right hand side in white color. Can we add this? In case there is something on the shopping card (like in the example on the screenshot) the circle with the number should remain in green color.

[B2Bridge]

hi @Frede, you can add this code

.header__icon .svg-wrapper {
    color: #fff !important;
}

[suyash1 · Accepted solution]

@Frede - overall css will become

{% if template.name == "index" %}
<style>
.header__menu-item span{color:#fff;}
.header__icon .icon{color:#fff;}

</style>
{% endif %}

[Frede]

That's it! Thank you sooo much! 🙃

[Frede]

Dear Suyash1,

I hope I can ask again for your support. I realized that there is still one little issue with the color of the menu. I have a drop-down menu that appears when a user clicks on "Info". The drop-down menu is announced by this little icon behind the word "Info". You can see it well on the first screenshot. However, on the second screenshot it's hardly visible since the color adaption is not affection the color of this icon. Is it possible to integrate the color of the icon in the code and change it to white as well?

Thank you so much!

[Frede]

I found the solution:

{% if template.name == "index" %}
  <style>
    header-menu summary,
    .list-menu > ul > li > .header__menu-item,
    .header__menu-item span, .header__icons *,
    summary.header__icon {
      color: white !important;
    }
  </style>
{% endif %}

[suyash1]

@Frede great, do let me know if you need any updates later