code change to colorize my collection menu affected banner

Store Design

Topic summary

A user applied CSS code to add a rainbow gradient effect to their Pride collection menu link, but this inadvertently removed text from a banner that used the same collection link.

Solution provided:

  • Scope the CSS selector more specifically by adding .thb-full-menu before the link selector
  • This targets only the menu link while leaving the banner text unaffected
  • The updated code successfully resolved the issue

Alternative approach suggested:

  • Use Shopify’s “Custom CSS” settings within the relevant section instead of editing theme code directly
  • This method automatically scopes styles to specific sections, preventing unintended side effects

Outcome: The problem was resolved using the scoped selector approach.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I made the below code change to colorize my collection menu:

a[href=“/collections/pride-collection”] {
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: bold;
}

but after the change the the text in one of my banner disappeared . The both use the same collection.

Is there a way to keep my rainbow gradient menu without affecting the text on my banner?

Please find doc attached.

Thank you in advance,

Regards,

Ton

1 Like
2

Because that text uses the same link as your link in the menu. Please update the code to this version below to solve

.thb-full-menu a[href="/collections/pride-collection"] {
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: bold;
}
3

The proper way to fix this is to put this code inside relevant section “Custom CSS” settings rather then editing theme code.

Shopify makes code from the “Custom CSS” to apply to this particular section only.

1 Like
4

That worked.

Thank you so much.

1 Like
5

Very welcome!

6

Great stuff