在正方形空间中移动的单独导航栏

Question

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

但是，它在移动设备上无法正常运行。我需要一种方法来仅拥有移动设备下拉菜单文件夹中的导航链接。

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

这可能需要为台式机和移动设备使用单独的导航栏。

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

我的模板是Mojave。

Answer 1

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

换句话说，将带有页面的文件夹以及指向页面的链接（在文件夹外部）添加到导航中。然后使用CSS在桌面上隐藏文件夹外部的链接，但在移动设备上隐藏文件夹（而不是外部链接）。

例如，请参见此Mojave demo here，它使用通过CSS Editor插入的以下CSS：

.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后端导航设置的图像。请注意，您可以将链接放入文件夹及其外部的页面中……两种方法都可以。