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

Store Design

Topic summary

A user seeks CSS code to change menubar icons (search, login, checkout) to white on the front page only. Initial attempts successfully modified the search icon and checkout count bubble, but not the gear, login, or checkout icons themselves.

Solution provided:
A helper shared CSS code using {% if template == 'index' %} with media queries targeting desktop screens (min-width: 770px). The code applies fill: white to SVG elements and color: white to specific icon classes.

Key refinements:

  • Initial code affected mobile headers unintentionally, requiring a media query adjustment
  • Original poster adapted the solution to accommodate a custom shopping cart badge, adding specific styling for .wbcart-count and menu links
  • Code uses Liquid templating and targets .header__icons .icon-search class

Follow-up question:
Another user asks how to extend the solution beyond just the homepage to all pages and mobile versions, indicating the current solution is desktop-homepage-specific only.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
4

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.

1 Like