Отдельная навигационная панель для мобильных устройств в Squarespace - PullRequest
Новая
       46

Отдельная навигационная панель для мобильных устройств в Squarespace

0 голосов
/ 07 января 2020

В моей навигационной панели есть папка, которая отлично работает на рабочем столе. enter image description here

Однако на мобильных устройствах она работает не очень хорошо. Мне нужен способ иметь только ссылки навигации, которые находятся в папке выпадающего меню на мобильном телефоне. enter image description here

Моя цель состоит в том, чтобы папка (а затем раскрывающееся меню) находилась на панели навигации на рабочем столе, но только ссылки в раскрывающемся меню панели навигации на мобильных устройствах.

Для этого, вероятно, требуются отдельные панели навигации для настольных компьютеров и мобильных устройств.

Есть предложения? Я за любые инъекции кода или пользовательские коды, которые будут выполнять sh что-то вроде этого.

Мой шаблон - Мохаве.

1 Ответ

1 голос
/ 08 января 2020

Обычный способ иметь независимую настольную и мобильную навигацию в Squarespace - добавить все папки, страницы и ссылки к навигации, а затем скрыть и показать их с помощью CSS в зависимости от ваших потребностей.

Другими словами, добавьте в свою папку папку со страницами и ссылки на страницы (вне папки). Затем используйте CSS, чтобы скрыть ссылки за пределами папки на рабочем столе, но скрыть папку (а не внешние ссылки) на мобильном телефоне.

Например, посмотрите эту демонстрацию Mojave здесь , которая использует следующее 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".

Конечно, вы бы изменили CSS (в частности, URL-адреса внутри него) для URL-адресов своей страницы. .

Вот изображение, показывающее настройку навигации в серверной части Squarespace. Обратите внимание, что вместо этого вы можете поместить ссылки в папку и страницы за ее пределами ... в любом случае будет работать.

Squarespace navigation example

...