css - Squarespace 中移动设备的独立导航栏

Question

我的导航栏中有一个文件夹，在桌面上效果很好。

但是，它在移动设备上效果不佳。我需要一种方法来获得移动设备下拉菜单文件夹中的导航链接。

我的目标是在桌面导航栏上显示文件夹(然后是下拉菜单)，但只有移动导航栏滑入式菜单中的链接。

这可能需要为桌面和移动设备单独的导航栏。

有什么建议吗？我愿意接受任何代码注入(inject)或自定义代码来完成类似的事情。

我的模板是 Mojave。

Answer 1

在 Squarespace 中拥有独立的桌面和移动导航的通常方法是将所有文件夹、页面和链接添加到导航中，然后根据您的需要使用 CSS 隐藏和显示它们。

换句话说，将包含页面的文件夹和指向页面的链接(在文件夹外)添加到您的导航中。然后使用 CSS 在桌面上隐藏文件夹外的链接，但在移动设备上隐藏文件夹(而不是外部链接)。

例如，看这个 Mojave demo here它使用以下 CSS，通过 CSS Editor 插入:

.Header-nav .Header-nav-item[href="/page-1"], .Header-nav .Header-nav-item[href="/page-2"] {
  display: none;
}

[data-nc-base="mobile-bar"] [data-controller-folder-toggle="folder-1"] {
  display: none;
}

在上面的代码中，第一条规则针对桌面标题导航以及其中具有 URL“/page-1”和“/page-2”的非文件夹链接。第二条规则针对移动导航，并进一步针对 URL 为“/folder-1”的文件夹。

您当然会更改页面 URL 的 CSS(特别是其中的 URL)。

这是一张显示 Squarespace 后端导航设置的图片。请注意，您可以将链接放在文件夹中，而将页面放在文件夹外……任何一种方法都可以。