首页 > 解决方案 > 造型辅助导航栏项目文件夹 - Squarespace - Jaunt 模板

问题描述

我想用 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链接时,此页面打开:

问题:此文件夹不包含任何页面

如何修复它以单击ITA / FRA并将其链接到主页?谢谢

标签: cssnavbarsquarespace

解决方案


在各种 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 方法。


推荐阅读