如何更改 Squarespace 导航菜单颜色

Question

我们正在使用带有四个页面的 Squarespace 构建一个原型商店：

Home, Store, About, Contact.

遗憾的是，所有页面都从网站的设计模板继承了相同的样式。我们想要做的是类似于 this 的东西，其中可以更改某些页面上 link 的颜色。

是否有一种方法可以克服以下事实：所有页面都使用相同的 class class="header-nav-item header-nav-item--collection"，以便 this type of solution 使用自定义 CSS 可以应用？

Answer 1

是的，这是可能的。使用 nth-child() 选择器是一种选择，但您可能会考虑通过其 href 属性引用元素，就像这样（当然，替换您选择的颜色）：

.header-nav-item a[href='/about'] {
  color: red;
}

如果您选择使用 nth-child()，请这样做：

.header-nav-item:nth-child(3) a {
  color: red;
}

最后，要编辑与活动页面（用户所在的任何页面）相对应的导航项的颜色，您可以这样写：

.header-nav-item.header-nav-item--active a {
    color: blue;
}

最后，如果您想在用户位于特定页面时更改所有导航项的颜色，您可以使用集合 ID 来实现，该集合 ID 用作 id 属性在大多数（如果不是全部）Squarespace 模板中的 body 元素上：

#collection-5d7ef2011673f45f239d1c51 .header-nav-item a {
    color: green;
}

作为一个有用的提示（您可能已经知道），您可以使用您的 browser's developer tools web inspector 检查元素，然后根据 Squarespace 生成的规则编写您自己的 CSS。

How to alter Squarespace Navigation Menu Colors