Transparent dropdown menu on home page only

Store Design
, , , , ,

Topic summary

A user sought help making their website’s dropdown menu transparent with white text, but only on the desktop homepage. They had working CSS code that affected all pages:

.header-wrapper * {
  color: white !important;
}
details[open] > .header__submenu {
  background-color: transparent !important;
  border: none !important;
}

Solutions provided:

  • Add .template_index class to the CSS selector to target only the homepage
  • Wrap the CSS in Liquid template conditionals in theme.liquid:
{% if template == 'index' %}
[CSS code here]
{% endif %}

Resolution: The user confirmed the solution worked perfectly. The discussion is resolved.

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

Hi everyone,

I’m looking for some assistance in making the dropdown menu on my website transparent with white lettering on my desktop home page only.

I was able to achieve the effect using the attached code, but it changes the menu so that it can’t be seen on other product pages.

Thank you in advance for any input!

details[open] > .header__submenu {
  background-color: transparent !important;
  border: none !important;
}
.header-wrapper * {
  color: white !important;
}
2

make sure to include .template_index class on css code so it applies only to homepage .

3

Hi @vfp1

You can add this code to your theme.liquid file, after to make it work on desktop homepage only

{% if template == 'index' %}

{% endif %}

Best Regards,

Dan from Ryviu

4

Thank you so much! This worked perfectly!!

1 Like
5

Happy I could help!