Hello,
my header is transparent on only the homepage but white for the rest of the website so having black text and black logos and icons dosnt work on the homepage i need help changing them.
so i need help with changing the colour of the header text and icons to WHITE but only on the homepage.
is it also possible to have a different logo for the homepage i have a white logo that i would like it to be but the other black logo for the rest of the website.
Thanks guys
Hello @LeviFurey
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.
Hi @LeviFurey
Would you mind sharing the store link then we can provide you with a suitable solution? (and entry password if the store hasn’t been published yet)
Looking forward to hearing from you soon. Thank you!
Best,
Daisy - Avada Support Team.
Hi @LeviFurey , thanks for reaching out.
To assist you further, could you kindly share your store URL?
Thanks for your cooperation in this matter.
Liz
Hi @LeviFurey
You can try this code to change the text color for the header from the Home page to white color first:
1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there
Here is the code for Step 3:
{% style %}
{% if template.name == "index" %}
header.header * {
color: white !important;
}
{% endif %}
{% endstyle %}
For the logo image, we can’t change its color from black to white. If you have a logo with white text, would you mind uploading it to your Shopify admin > Files here: https://prnt.sc/_yuENIWC9-9x - then please share with me the image’s link so that we can provide you with a suitable code to apply this logo image for only Home page.
Best,
Daisy - Avada Support Team.
Hi @LeviFurey
Try this one.
{% if template.name == 'index' %}
{% endif %}
And Save.
Result:
Note: for the logo, you need another image for white font.
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Hello,
thankyou for getting back to me.
i tried the code it works partially it changed the colour of the text and icons but i only want the colour to be changed for the homepage not for the whole website.
and heres the link to the other logo: https://cdn.shopify.com/s/files/1/0806/8153/3752/files/1_7b4647c9-b2d4-4872-8989-e61cc4c369fb.png?v=1728607367
thanks
hello
this is the website URL: https://notonlywater.com.au/
hello,
thank you for getting back to me.
iv tried the code and it works however on mobile as the text is white and when you open the sidemenu as the background is white so you cannot see the text.
and for the logo i have it here: https://cdn.shopify.com/s/files/1/0806/8153/3752/files/1_7b4647c9-b2d4-4872-8989-e61cc4c369fb.png?v=…
Hi @LeviFurey , thanks for your information.
To address the issue, please help me follow the detailed steps:
Go to Theme → Edit code. https://prnt.sc/btBdiFPCpXOT
Open the theme.liquid file => Click on the content => Press Ctrl + F (or Command + F on Mac) and search for the keyword <body. https://prnt.sc/Dn7bj6BZ1ct8
Insert the following code right below the line containing the <body tag you found in Step 2. https://prnt.sc/GrINaMKMkQ9M
{%- style -%}
{%- if request.page_type == "index" -%}
header * {
color: white !important;
}
.header__heading-logo-wrapper img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
{%- endif -%}
{%- endstyle -%}
You can check the outcome here:
This solution customizes the CSS directly, so you don’t need to replace the image. I hope my solution is helpful to you.
Liz
Hello,
thankyou for getting back to me.
it works however on mobile when the sidebar is open the text remains white and as the background of the sidebar is white you cannot see the text.
can it be changed to black text only when the sidebar is opened on mobile?
thankyou
Hi @LeviFurey , I highly appreciate your feedback.
In this case, please help me try replacing the previous custom code with this new one and see how it works:
.header:not(:has(details[open])) * {
color: white !important;
}
.header:not(:has(details[open])) .header__heading-logo-wrapper img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
I look forward to hearing from you, and thanks for your patience in the meantime.
Liz
yes that worked thankyou very much Liz
hello liz,
i just noticed 2 minor issues.
in the first picture, when the dropdown arrow is clicked the text and logo on the header will revert back to black on desktop, mobile is fine. can it be made so when the dropdown arrow is clicked the text and logo will remain white on desktop only.
in the second image, the country/currency converter text remains white can it be changed to black on desktop only its fine mobile.
thankyou
Hi @LeviFurey , thanks for your updates.
To address the issue, please try using this custom code instead:
.header:not(:has(details.menu-drawer-container.menu-opening[open])) *:not(.disclosure__list-wrapper *):not(.header__submenu *) {
color: white !important;
}
.header:not(:has(details.menu-drawer-container.menu-opening[open])) .header__heading-logo-wrapper img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
I highly appreciate your patience in the meantime.
Liz
hello,
this worked for the second issue (currency/country converter) the text is now black.
but did not work for the first issue (dropdown menu text colour) the text is now white, however the header text and logo will stay white.
i used ai and found a solution here it is:
{%- style -%}
{%- if request.page_type == "index" -%}
/* Change all header text to white on the homepage, except dropdowns */
.header:not(:has(details.menu-drawer-container.menu-opening[open])) *:not(#MegaMenu-Content-1 *):not(.header__submenu *):not(.disclosure__list-wrapper *) {
color: white !important;
}
/* Ensure the logo is inverted */
.header:not(:has(details.menu-drawer-container.menu-opening[open])) .header__heading-logo-wrapper img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
/* Force the main dropdown menu text to black */
#MegaMenu-Content-1,
#MegaMenu-Content-1 .mega-menu__link {
color: black !important;
}
/* Ensure the dropdown menu background stays white */
#MegaMenu-Content-1 {
background-color: white !important;
}
/* Preserve currency/country selector dropdown text as black */
.disclosure__list-wrapper {
color: black !important;
}
/* Optional: Ensure the currency/country selector dropdown background stays white */
.disclosure__list-wrapper {
background-color: white !important;
}
{%- endif -%}
{%- endstyle -%}
can you check for my store? I also want homepage header text and icons white, and black on the rest of the pages.