Change navigation link color depending on the page?

Some of my web pages are black, some are white, etc. I have a full-bleed image on my homepage so I don't want to have the solid colored header. Is there code I can insert to change the color of my navigation and social media links on each page? It's a major accessibility issue. 

lisapearlman.com

Thanks!

Hi @lepearlman, You can try the code blocks below to change the colors on header navigation:

For homepage,

#collection-64b8018a4f993f71c603993d {
	.header-nav-item a {
		color: #000000 !important;
	}
	.header-actions .icon--fill svg {
		fill: #000000 !important;
	}
}

For Galleries Page,

#collection-64b8089eab057425fc395bac {
	.header-nav-item a {
		color: #000000 !important;
	}
	.header-actions .icon--fill svg {
		fill: #000000 !important;
	}
}

For About Page,

#collection-64b808216c3d2c44f5c7913b {
	.header-nav-item a {
		color: #000000 !important;
	}
	.header-actions .icon--fill svg {
		fill: #000000 !important;
	}
}

For Contact Page,

#collection-64b82c40e68eb17ffb016271 {
	.header-nav-item a {
		color: #000000 !important;
	}
	.header-actions .icon--fill svg {
		fill: #000000 !important;
	}
}

You can change the color code "#000000" in each block of codes. 

Let me know how it goes. Thanks!

Hi @Lesum! Thank you so much, this was wildly helpful. Can I ask how you generated the #collection-xyz for my pages?

@lepearlman Thanks! You can use this Chrome extension to find the collection-id on your Squarespace website: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff