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

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.

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:

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

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

Kind regards,

Aclothingbrand.

2 Likes

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

Hi @aclothingbrand

Would you mind sharing your store URL? Thanks!

Hi! I’ve send you a private message.

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!