Squarespace 7.1网站实现不同页面自定义头部的方法

核心自定义CSS代码 #

将以下代码粘贴到网站后台的「设置」>「高级」>「自定义CSS」中：

/* 所有非首页页面的头部样式 */
body:not(#collection-65c3c4c71ae4e74d597f0ef3) .header-wrapper {
  background-color: #928A80 !important;
}
body:not(#collection-65c3c4c71ae4e74d597f0ef3) .header-title a,
body:not(#collection-65c3c4c71ae4e74d597f0ef3) .header-nav-item a {
  color: #ffffff !important;
}

/* 首页头部透明样式（包含初始状态和滚动状态） */
#collection-65c3c4c71ae4e74d597f0ef3 .header-wrapper {
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
#collection-65c3c4c71ae4e74d597f0ef3 .header-title a,
#collection-65c3c4c71ae4e74d597f0ef3 .header-nav-item a {
  color: #ffffff !important;
}

/* 强制首页滚动时头部保持透明 */
#collection-65c3c4c71ae4e74d597f0ef3 .header-wrapper--overlay {
  background-color: transparent !important;
  box-shadow: none !important;
}

代码说明 #

• 通过body:not(#首页集合ID)精准排除首页，为其他页面设置棕褐色背景与白色文字
• 针对首页使用!important强制覆盖主题默认样式，移除头部阴影、边框，确保完全透明
• 额外处理滚动状态的头部样式，避免首页滚动时头部自动切换为不透明状态
• 单独指定标题和导航链接的文字颜色，避免因主题默认样式冲突导致文字辨识度低

验证与适配 #

1. 保存代码后刷新页面，检查首页头部是否完全透明、背景图完整展示
2. 打开其他页面，确认头部背景为#928A80且文字为白色
3. 若移动端头部样式异常，添加以下适配代码：

/* 移动端头部适配 */
@media screen and (max-width: 767px) {
  body:not(#collection-65c3c4c71ae4e74d597f0ef3) .header-wrapper {
    background-color: #928A80 !important;
  }
  #collection-65c3c4c71ae4e74d597f0ef3 .header-wrapper {
    background-color: transparent !important;
  }
}

内容的提问来源于stack exchange，提问作者Mariela