css - 样式化辅助导航栏元素文件夹 - Squarespace - Jaunt 模板

Question

我想为我正在使用 Jaunt 模板设计的该网站的辅助导航栏的文件夹元素设置样式(仍在进行中。密码:edizioni_test): https://tan-perch-9lhf.squarespace.com

我希望文本 ITA/FRA 为粗体。我试着用这个 css 代码来设计它的样式:

span.Header-nav-item.Header-nav-item--folder a { 
   font-weight:900 !important;
   color:#777777 !important;
   }

 span.Header-nav-item.Header-nav-item--folder a:hover {
   color:#cccccc !important;
 }

但我遇到了这个问题:当我点击 ITA/FRA 链接时，此页面打开:

issue: this folder does not contain any pages

如何修复它以便点击 ITA/FRA 并将其链接到主页？谢谢

Answer 1

在各种 Squarespace 模板上禁用/关闭 Squarespace 中导航文件夹上的点击/链接的一般建议方法是在目标元素上使用 pointer-events:none。在某些模板上，这需要在后续子元素上设置 pointer-events:all，但在您的情况下不需要。

在您的情况下，我们可以简单地定位特定元素并将其保留在那里(同级元素将保持可点击)。通过 CSS 编辑器输入以下一个:

a[href='/ita-fra'] {
  pointer-events: none;
}

或

.Header-nav-folder-title {
  pointer-events: none;
}

上面的第一种方法通过 URL 定位链接并特定于该链接。第二个是更通用的规则，适用于您可能添加到标题的其他此类文件夹。

请注意，这不会阻止在使用键盘或可能的辅助技术时“跳转到”目标链接，尽管它通常会阻止“执行”链接。要完全删除链接需要使用 Javascript，但正如我所说，Squarespace 社区普遍接受仅使用 CSS 的方法。