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

Question

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

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

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

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

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

我的模板是 Mojave。

Answer 1

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

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

例如，看到这个 Mojave demo here which uses the following CSS, inserted via the 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;
}

在上面的代码中，第一条规则针对桌面 header 导航以及其中包含 URLs“/page-1”和“的 non-folder-links /第2页”。第二条规则针对移动导航，并进一步针对带有 URL "/folder-1" 的文件夹。

您当然会为您的页面 URL 更改 CSS（具体来说，其中的 URL）。

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

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

Separate Nav Bar for Mobile in Squarespace

css

mobile

navbar

nav

squarespace