Squarespace 中用于移动设备的单独导航栏答案

【问题标题】：Separate Nav Bar for Mobile in SquarespaceSquarespace 中用于移动设备的单独导航栏
【发布时间】：2020-01-07 19:05:23
【问题描述】：

我的导航栏中有一个文件夹，在桌面上非常好用。

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

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

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

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

我的模板是 Mojave。

【问题讨论】：

标签： css mobile navbar nav squarespace

【解决方案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 后端的导航设置的图片。请注意，您可以改为将链接放在文件夹中，并将页面放在文件夹之外...任何一种方式都可以。

【讨论】：