Every Squarespace 7.1 page adds a unique class to the body element based on the collection ID, formatted as .collection-XXXX. You can use this to target the header on specific pages only.
Find the collection class by inspecting the body tag on the target page, then scope your header styles to that class. This lets you have a transparent header on the homepage and a solid header everywhere else, for example.
/* Transparent header on homepage only */
body.collection-YOUR_HOME_ID .header {
background: transparent !important;
position: absolute;
width: 100%;
z-index: 999;
}
body.collection-YOUR_HOME_ID .header .header-title-text a,
body.collection-YOUR_HOME_ID .header .header-nav-item a {
color: #fff !important;
}
/* Dark header on a specific inner page */
body.collection-YOUR_PAGE_ID .header {
background: #111 !important;
}
body.collection-YOUR_PAGE_ID .header .header-nav-item a {
color: #fff !important;
}Generate this with our Nav CustomizerTry it free →
