Changing header text colour and icons on homepage only

[alant]

Hello,

Could you anyone support with below please:

I want header text and icons colour to be white on homepage only (the rest of the pages it should be black).

I've managed to change the colour of the text, however the dropdown icon and cart remain black. How can I change it?

I would also like to change the logo on homepage only to a different design, is there a way of doing so?

I would appreciate any support!

My store: https://gz8o5qkua4r3oxzd-78805696849.shopifypreview.com

[BSSCommerce-HDL · Accepted solution]

Hi @alant, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

{% if template.name == 'index' %}
    <style>
 
.header__icon--cart, 
.header__menu-item .icon-caret {
    color: white !important;
}
    </style>
{% endif %}

 Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @alant, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

{% if template.name == 'index' %}
    <style>
       .header__heading-logo-wrapper {
            filter: invert(1);
       }
    </style>
{% endif %}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Oh sorry, Pls replace old code to this new code: 

{% if template.name == 'index' %}
<style>
@media only screen and (max-width: 749px) {
summary.header__icon.header__icon--menu svg {
    color: white !important;
}
summary.header__icon.header__icon--menu svg,
.list-menu__item.link.link--text {
    color: white !important;
}
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Priyanka_]

Hi @alant 

To change the cart color on homepage only follow the below steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template == 'index' %}
<style>
.header__icon--cart::after{
    color: #fff !important;
}
</style>
{% endif %}

5) Save the changes.

Yes, it's possible to use a different logo design exclusively for the homepage. This requires modifying your theme's code files. Feel free to DM me if you need any help with this.

[alant]

Hi there, 

thanks for that, I didn't work unfortunately.

[Rahul_dhiman]

Hello @alant 
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.header__icon--cart {
color: white;
}
.header__menu-item .icon-caret {
color: white !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[alant]

Hi there,

Thanks for that! It worked partially, however it changed the colour to white on all sites and I want to change it only on homepage.

[Priyanka_]

Hi @alant 

Add the below code if you want to change the color on homepage template only:

{% if template.name == 'index' %}
<style>
.header__icon--cart {
color: white !important;
}
.header__menu-item .icon-caret {
color: white !important;
}
</style>
{% endif %}

[BSSCommerce-HDL · Accepted solution]

Hi @alant, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

{% if template.name == 'index' %}
    <style>
 
.header__icon--cart, 
.header__menu-item .icon-caret {
    color: white !important;
}
    </style>
{% endif %}

 Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[alant]

That worked perfectly, thank you so much!!!

Would you be also able to support how to change logo on the homepage only?

[BSSCommerce-HDL · Accepted solution]

Hi @alant, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

{% if template.name == 'index' %}
    <style>
       .header__heading-logo-wrapper {
            filter: invert(1);
       }
    </style>
{% endif %}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[alant]

Worked! Thank you!

[BSSCommerce-HDL]

@alant, No problem. Have a good day 😍

[alant]

Can I have another request please - just realised that on mobile icons of menu and text are still in black. (would like to change as previously to white only on homepage). Would you be able to support?

[alant]

Can I have another request please - just realised that on mobile icons of menu and text are still in black. (would like to change as previously to white only on homepage). Would you be able to support?

[BSSCommerce-HDL]

Hi @alant, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 749px) {
summary.header__icon.header__icon--menu svg {
    color: white !important;
}
summary.header__icon.header__icon--menu svg,
.list-menu__item.link.link--text {
    color: white !important;
}
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[alant]

That worked, however it change menu icon to white on all pages - can we keep it white on homepage and black on all the rest?

[BSSCommerce-HDL · Accepted solution]

Oh sorry, Pls replace old code to this new code: 

{% if template.name == 'index' %}
<style>
@media only screen and (max-width: 749px) {
summary.header__icon.header__icon--menu svg {
    color: white !important;
}
summary.header__icon.header__icon--menu svg,
.list-menu__item.link.link--text {
    color: white !important;
}
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[alant]

Worked! But now it also changes footer menu to white on the main page so it's not visible - can footer be black on all the pages please?

[BSSCommerce-HDL · Accepted solution]

Hi @alant, Pls replace previous code to new code: 

{% if template.name == 'index' %}
<style>
@media only screen and (max-width: 749px) {
  summary.header__icon.header__icon--menu svg,
  #menu-drawer  .list-menu__item.link.link--text {
    color: white !important;
  }
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Rahul_dhiman]

Hello @alant 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-menu-drewer.css
add this code at the end of the file.

@media screen and (max-width: 749px) {
.menu-drawer__menu-item {
    color: white !important;
}
.menu-drawer__close-button .icon-arrow {
    color: white !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks