Navigation in header text is white when away from home screen and cant see text
How do I change it to black?
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 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
Hi @AmberWilkinson ,
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- In theme.liquid, paste the below code before
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!
Thank you so much!
Glad it worked!