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?
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-countand menu links - Code uses Liquid templating and targets
.header__icons .icon-searchclass
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.