Navigation titles disapear when on collection or product page

AmberWilkinson · ‎10-28-2024

Navigation in header text is white when away from home screen and cant see text

How do I change it to black?

https://www.deadsettransfers.com.au/collections/uv-dtf

websensepro · ‎10-28-2024

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
ul.contents {
    color: black !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

View solution in original post

rajweb · ‎10-28-2024

Hey @AmberWilkinson ,

To ensure your navigation text changes to black when you're away from the home screen, you can target the " .header__link-list a " elements specifically based on the page state. This can be achieved by using CSS:

Add this CSS to make the header navigation text black on all pages other than the home page:

/* Default black color for navigation text */
.header__link-list a {
  color: black;
}

/* Change color to white when on the home page */
body.home-page .header__link-list a {
  color: white;
}

If your theme or page doesn’t add a specific home-page class to the <body> element, you can use JavaScript to detect when you're on the home page and apply the color conditionally. Here’s a JavaScript approach:

document.addEventListener("DOMContentLoaded", function() {
  const navLinks = document.querySelectorAll(".header__link-list a");
  const isHomePage = window.location.pathname === "/";

  navLinks.forEach(link => {
    link.style.color = isHomePage ? "white" : "black";
  });
});

This JavaScript checks if the current page is the home page ( "/" path) and sets the text color accordingly. Add this script to the bottom of your HTML or in a JavaScript file linked to your page.

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

websensepro · ‎10-28-2024

Hi @AmberWilkinson ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
ul.contents {
    color: black !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

AmberWilkinson · ‎10-29-2024

Thank you so much!

websensepro · ‎10-29-2024

Glad it worked!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

Navigation titles disapear when on collection or product page

Navigation titles disapear when on collection or product page

Community Blog Articles