Как сделать на сайте липкое меню

Что такое липкое меню?

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

Большинство современных шаблонов WordPress по умолчанию поддерживают липкое меню. Но, есть шаблоны у которых для меню не прописаны специальные стили.

Как сделать липкое меню?

Есть два варианта решения этого вопроса:
— для меню прописать стили CSS
— использовать плагин

Рассмотрим второй вариант.

Я предлагаю установить плагин myStickymenu. Это плагин для нашего меню сам прописывает нужные стили. Главное, это указать плагину правильный класс нашего меню, ведь на сайте может быть несколько меню.

1.Установка плагина

Через раздел Плагины — Добавить новый в поиске указываем название плагина «myStickymenu».
Устанавливаем и активируем плагин.

Липкое меню

2.Определяем ID или Класс нашего меню

Плагин не знает для какого меню мы хотим создать функцию липкости. А потому нам необходимо узнать и указать ID нашего меню.

Чтобы определить ID/класс меню можно воспользоваться инструментами разработчика, которые есть в браузерах Google Chrome или Mozilla Firefox. А можно открыть файл header.php и просмотреть исходный код.

Липкое меню

3.Настройки плагина

Параметры плагина находятся в разделе: Настройки — myStickymenu

Все опции плагина разбиты на три вкладки.

General Settings — Общие настройки

Липкое меню

В поле Sticky Class необходимо указать класс нашего меню. Это главное поле.

Disable at Small Screen Sizes — отключить липкое меню на маленьких экранах меньше чем…
Например, на устройствах с экранами до 600 px липкое меню отображаться не будет.

Disable at Large Screen Sizes — отключить липкое меню на больших экранах больше чем…

Style — Стиль

Липкое меню

Здесь можно настроить внешний вид липкого меню и изменить стили.

Читайте:  Большой день для команды Dream-Theme

Advanced — Дополнительно

Липкое меню

Липкое меню можно отключить для страниц и таксономий.

Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии