Colorchanging header

[CorazonRTS]

Hi,

Ive setup a website for the Company Corazon RTS.

I have designed a transparent header with a black title & black icon, because the website is white.

The problem occurs because the landingpage consists of a dark image. I have tried changing the color using {% if}

But I am unsurten if I have set it up correctly, the code is placed in the header but I am not sure how to target the 'Index.json'

Currently I followed what what other people have done, when reading here on the forums

{%if template == 'index.json'}

.header__icon{

color: white !Important;

}
{%endif}

Please let me know if any of you see the problem, which I cant seem to solve!

[CodingFifty · Accepted solution]

Hi @CorazonRTS,

To fix the issue, try this:

1. Use index instead of index.json:

   {% if template == 'index' %}
      .header__icon {
         color: white !important;
      }
   {% endif %}

2. Ensure the class .header__icon is correct by inspecting the element.

3. Place the code inside a <style> block:

   <style>
   {% if template == 'index' %}
      .header__icon {
         color: white !important;
      }
   {% endif %}
   </style>

[CorazonRTS]

Hi Codingfifty!

Thank you so much for your help with the setup, I had tried this solution earlier, but realised I had placed </style> inside the {%if}

Sometimes I am surprised of my own stupidity haha.

Never the less, Thank you so much - It worked perfectly!

[CodingFifty]

Please mark and like the solution @CorazonRTS