Change the color of the search, login, checkout icons in menubar for front page only

makersh · ‎08-07-2022

I'm looking for the code to make these icons white (for the front page only).

I managed to change the Search icon and the count bubble inside the checkout icon.

 {% if request.page_type == "index" %}
       <style> 
       .wbmenul1_link{
         color:#fff;
        } 
      .wbhcart .wbcart-count{
        background: #fff;
        color: #000;
        }

I haven't been able to change the gear, login or checkout.

followed the Solved Shopify Discussions without success. One of the guides said to edit "theme.scss.liquid" but that file doesn't exist.

DavidEKim · ‎08-08-2022

Hi,

Please add the code below to layout/theme.liquid inside of head tag (<head> ENTER THE CODE HERE </head>). If you put the code below before </head>, it will be fine.

{% if template == 'index' %}
{% style %}
svg {
    fill: white;
}
.header__icons .icon-search {
    color: white;
}
{% endstyle %}
{% endif %}

Hope it helps.

If you resolve the issues, please click "Like" and "Accept solution".

If you have any other questions, please let me know.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

View solution in original post

makersh · ‎08-08-2022

Thank you. I was just about to contact you.

I had to do it like below due to the menu only appearing on hover due to the custom shopping cart badge fill.

I'm not sure if there's a more elegant way, but it works.

Thanks again

{% if template == 'index' %}
{% style %}
@media only screen and (min-width: 770px) {
  svg {
    fill: white;
  }
  .header__icons .icon-search {
    color: white;
  }
  header.header {
    background: rgba(0,0,0,0) !important;
  }
 .wbmenul1_link{
         color:#fff;
        } 
}
{% endstyle %}
{% endif %}



{% if template == 'index' %}
{% style %}
@media only screen and (max-width: 771px) 
 .wbmenul1_link{
         color:#fff;
        } 
      .wbhcart .wbcart-count{
        background: red;
        color: #fff;
        } 
{% endstyle %}
{% endif %}

View solution in original post

DelightCart · ‎08-08-2022

@makersh Pease send me store url.

⚡️ Delight Cart - It's time to turn your visitors into loyal shoppers! ✨

⚡️ Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.

DavidEKim · ‎08-08-2022

Hi,

Please add the code below to layout/theme.liquid inside of head tag (<head> ENTER THE CODE HERE </head>). If you put the code below before </head>, it will be fine.

{% if template == 'index' %}
{% style %}
svg {
    fill: white;
}
.header__icons .icon-search {
    color: white;
}
{% endstyle %}
{% endif %}

Hope it helps.

If you resolve the issues, please click "Like" and "Accept solution".

If you have any other questions, please let me know.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

paris11111 · ‎08-10-2024

Hello, adding this code worked for me, but the change only applied to the home page of the desktop version and not on product pages or on mobile. Is there another code I can add for it to work on all pages?

DavidEKim · ‎08-08-2022

Hi,

Thanks for "Like" and "Accept solution".

After I post the reply, I found that the code will affect to mobile header to be white.

Please replace the previous code to the below code.

{% if template == 'index' %}
{% style %}
@media only screen and (min-width: 770px) {
  svg {
    fill: white;
  }
  .header__icons .icon-search {
    color: white;
  }
  header.header {
    background: rgba(0,0,0,0) !important;
  }
}
{% endstyle %}
{% endif %}

Please select this post to be "Accepted Solution" for other users if they have the same issues.

Hope it helps.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

makersh · ‎08-08-2022

Thank you. I was just about to contact you.

I had to do it like below due to the menu only appearing on hover due to the custom shopping cart badge fill.

I'm not sure if there's a more elegant way, but it works.

Thanks again

{% if template == 'index' %}
{% style %}
@media only screen and (min-width: 770px) {
  svg {
    fill: white;
  }
  .header__icons .icon-search {
    color: white;
  }
  header.header {
    background: rgba(0,0,0,0) !important;
  }
 .wbmenul1_link{
         color:#fff;
        } 
}
{% endstyle %}
{% endif %}



{% if template == 'index' %}
{% style %}
@media only screen and (max-width: 771px) 
 .wbmenul1_link{
         color:#fff;
        } 
      .wbhcart .wbcart-count{
        background: red;
        color: #fff;
        } 
{% endstyle %}
{% endif %}

Change the color of the search, login, checkout icons in menubar for front page only

Change the color of the search, login, checkout icons in menubar for front page only

Community Blog Articles