Как включить закрепленную навигацию на сайтах Weebly?

Weebly предлагает классный конструктор сайтов с функцией перетаскивания для создания вашего интернет-магазина. Хотя редактор Weebly прост в использовании, он также имеет некоторые скрытые функции. Липкая навигация — одна из таких функций, которая позволяет зафиксировать верхний раздел навигации при прокрутке страницы вниз. Если ваш сайт не использует липкую навигацию по умолчанию, вот как вы можете включить липкую навигацию на сайтах Weebly, как бесплатных, так и платных. Также узнайте, как добавить горизонтальное и вертикальное навигационное меню в Weebly.

Тема и навигация

К сожалению, все темы Weebly не поддерживают фиксированную или липкую навигацию по умолчанию. Поэтому убедитесь, что выбрали тему, которая поддерживает эту функцию, иначе вам придется вручную добавить фрагмент CSS-кода для настройки темы.

Включить фиксированную навигацию

Войдите в свою учетную запись и отредактируйте сайт, на котором вы хотите включить закрепленную навигацию.
Находясь в редакторе Weebly, перейдите на вкладку «Тема» и нажмите кнопку «Параметры темы».

Открыть параметры темы

Найдите опцию «Закрепленная навигация» и включите ее.
Нажмите кнопку «Опубликовать», чтобы применить изменения.

Включите закрепленную навигацию и опубликуйте

Обратите внимание, что в некоторых темах вместо «Закрепленной навигации» будет отображаться «Фиксированная навигация», и включите эту опцию.

Фиксированная опция навигации

Изменения будут применены мгновенно в редакторе. Вы можете прокрутить содержимое вниз и проверить, как работает липкая навигация. В противном случае опубликуйте его, чтобы просмотреть свой сайт в новой вкладке браузера, и прокрутите страницу вниз, чтобы увидеть, что навигационное меню ведет себя как фиксированное в верхней области.

Предварительный просмотр в редакторе

Включение закрепленной навигации вручную

Если вы не можете найти кнопку «Параметры темы» или опцию «Закрепленная/фиксированная навигация» в разделе «Параметры темы», значит, ваша тема не поддерживает эту функцию.

Отсутствие липкой или фиксированной навигации

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

Сначала откройте свой сайт в новой вкладке браузера, щелкните правой кнопкой мыши по заголовку навигации и выберите опцию «Проверить».
Это откроет раздел консоли разработчика браузера. Найдите класс заголовка, который должен быть чем-то вроде «header-wrap» или «themename-header». Например, «unite-header» — это класс CSS навигационного заголовка для темы Unite.

Найти CSS-класс оболочки заголовка

Найдя класс CSS, перейдите в редактор Weebly и на вкладку «Тема».
Нажмите кнопку «Изменить HTML/CSS», отображаемую в левом нижнем углу экрана.

Редактировать HTML и CSS

Это откроет вам редактор кода Weebly и позволит перейти к файлу «main.less» в разделе «Стили».
Вставьте следующий код в конец кода, заменив themename-header на имя CSS-класса вашей темы.

.themename-header { position: sticky !important; position: -webkit-sticky !important; top: 0 !important; }

Вы можете просмотреть навигацию в реальном времени под разделом кода, чтобы проверить ее работу. Нажмите кнопку «Сохранить» и введите пользовательское имя для вашей темы.

Добавить липкий навигационный код