Make the header content (drawer menu and icons) a different color on the landing page

Shopify Discussion

Topic summary

A Shopify store owner needs help styling header elements differently across pages:

Current Setup:

  • Landing page: transparent header with white logo, drawer menu, and icons (working as intended)
  • Other pages: white header background with black logo (working), but drawer menu and icons remain white instead of black/dark blue

Problem:
Unable to change the color of the drawer menu and icons on non-landing pages to match the darker theme.

Resolution:
A solution was provided involving custom code to be added to the theme.liquid file before the </head> tag. The code snippet uses conditional logic based on the template name (‘index’) to apply different styling.

Status: Resolved - the helper provided CSS/Liquid code and requested the original poster mark the solution if it worked.

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

Hi!

I currently have a transparent header on the landing page with white content (logo, drawer menu and icons). I managed to make the header background white with a black logo on all the other pages but I’m struggling to make the icons and the drawer menu black/dark blue on the other pages. Does anyone know how to do this? Would appreciate it a lot!

This is what the other pages look like:

Screenshot 2024-08-28 at 14.46.03.png
Screenshot 2024-08-28 at 14.46.03.png2142×1106 93.2 KB

This is what the landing page looks like (nothing needs to be changed here)

Screenshot 2024-08-28 at 14.51.47.png
Screenshot 2024-08-28 at 14.51.47.png1818×1066 314 KB

This is what I want the other pages to look like:

Screenshot 2024-08-28 at 14.48.00.png
Screenshot 2024-08-28 at 14.48.00.png2140×1096 96.3 KB

Kind regards,

Aclothingbrand.

2 Likes
2

someone asked for my email to fix it but he deleted the reply

3

Hi @aclothingbrand

Would you mind sharing your store URL? Thanks!

4

Hi! I’ve send you a private message.

5

Thanks for the info, check this one.

Please replace this on the code you have in the theme.liquid. And Place this code before the 

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

{% else %}

{% endif %}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!