Footer menu text colour is pale/faded

[yeknomgorf]

Hi, the text on my footer menu is not pure white. I have worked my way through the settings and cant see where to change this colour or the text opacity. I’m sure there must be a way to do this without changing the code, can anyone point me in the right direction?

[Samita-Danny]

Hi yeknomgorf. I’m Danny from Samita team.
I’ve reviewed your screenshot, and here’s how you can change your footer menu text color to pure white:

Option 1 – Using Shopify’s Theme Customizer (No coding required)

1. Go to your Shopify admin → Online Store → Customize.

2. In the preview editor, click on your Footer section.

3. Under Color scheme, check which scheme your footer is using

4. Click Edit next to that scheme.

5. Adjust the Text color and Link color to pure white (#FFFFFF).

   

Save your changes and refresh your storefront to check the result.

Option 2 – Using Custom CSS (if the theme editor doesn’t give the exact control)
If your theme doesn’t allow you to change the footer link text color directly:

1. In the same Footer section settings, scroll down to Custom CSS.

2. Add the following code:

For example:

.footer-block__details-content .list-menu__item--link,
.copyright__content a {
  color: rgba(var(--color-foreground), 0.75);
}

.footer-block__details-content .list-menu__item--active {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
}

@media screen and (min-width: 750px) {
  .footer-block__details-content .list-menu__item--link:hover,
  .copyright__content a:hover {
    color: rgb(var(--color-foreground));
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  .footer-block__details-content .list-menu__item--active:hover {
    text-decoration-thickness: 0.2rem;
  }
}

If you could please send us the URL of the page where the footer is appearing, we will review it and provide you with the exact custom CSS snippet needed to make your footer menu text pure white, ensuring it displays correctly across all devices.

Best regard.
Danny

[tim_tairli]

I’d say that these are links and are semi-transparent to become opaque on hover:

assets/section-footer.css

You may try and change the color property to be the other way around – opaque by default and semi-transparent on active/hover

[yeknomgorf]

Thanks for the replies - so this design really is built into the theme. I’ll have a play around with this.