样式化辅助导航栏项目文件夹 - 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 link 时，此页面打开：

issue: this folder does not contain any pages

如何修复它以便单击 ITA / FRA 并将其linked 到主页？谢谢

Answer 1

禁用/turn-off单击/link在各种Squarespace模板上的Squarespace导航文件夹上的generally-suggested方法是在目标元素上使用pointer-events:none。在某些模板上，这需要在随后的 child 元素上设置 pointer-events:all，但在您的情况下不需要。

对于您的情况，我们可以简单地定位特定元素并将其保留（同级元素将保持可点击）。通过 CSS 编辑器输入以下一个：

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

或

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

上面的第一种方法通过 URL 针对 link 并特定于 link。第二个是更通用的规则，适用于您可以添加到 header.

的其他此类文件夹

请注意，这不会阻止 "tabbing" 在使用键盘或可能的辅助技术时进入目标 link，尽管它通常会阻止 "executing" link .要完全删除 link 需要使用 Javascript，但正如我所说，CSS-only 方法在 Squarespace 社区中被普遍接受。

样式化辅助导航栏项目文件夹 - Squarespace - Jaunt 模板

Styling secondary nav bar item folder - Squarespace - Jaunt template

css

squarespace

navbar