С помощью плагина – myStickymenu вы сможете сделать на своём сайте wordpress липкое меню. При прокрутке страницы меню будет всегда на виду, на экране. В настройках плагина можно выбрать цвет меню, установить уровень прозрачности, расстояние в пикселях перед появлением меню и т.д.
Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина перейдите на страницу: Настройки – myStickymenu, здесь вы сможете настроить меню.
– Sticky Class, укажите здесь класс меню, страницы которого должны отображаться в липком меню. В конце записи я покажу как узнать класс меню.
– Sticky z-index, оставьте без изменений.
– Sticky Background Color, можете выбрать цвет меню.
– Sticky Opacity, можете задать здесь степень прозрачности меню.
– Sticky Transition Time, здесь указано время перехода от стандартного меню к липкому.
– Disable at Small Screen Sizes, отключить липкое меню на небольших экранах. Укажите размер экрана, если экран будет меньше установленного размера, то липкое меню показываться не будет.
– Make visible on Scroll, расстояние в пикселях после которого будет появляться меню при прокрутке страницы.
– Make visible on Scroll at homepage, то же самое что и выше, но на главной странице.
– Fade or slide effect, можно включить слайд эффект.
– myfixed css class, оставьте без изменений.
– Disable CSS style, можно отключить стили по умолчанию и использовать свои стили.
– Сохраните изменения.
Как узнать класс меню ?
Перейдите на главную страницу вашего сайта, откройте исходный код страницы с помощью правой кнопки мыши. В коде, примерно по середине страницы, вам нужно найти HTML код меню сайта, там будут указаны названия страниц. В начале этого кода будет указан класс меню в кавычках, скопируйте класс меню и вставьте его в поле Sticky Class в настройках плагина. Перед названием класса меню поставьте точку, как на скриншоте.
После сохранения настроек липкое меню появится на вашем сайте.
Остались вопросы ? Напиши комментарий ! Удачи !
Применил для своего сайта. Получилось превосходно!
Класс меню у себя нашел в header.php.
Спасибо Вам, Илья!
p.s. Не знаю, приветствуются ли на этом сайте прописать линки (без внешних ссылок, разумеется), а то, для демонстрации проделанной мною работы, мог выложить его.
Привет! как сделать свои стили для липкого меню?
Привет, можно вручную стили поменять или добавить, а можно плагин использовать – SiteOrigin CSS.
Не встал.
Что значит “Не встал” ?
Лажа, не работает…
Вы не правы, всё работает, я проверял не раз. Значит не правильно сделали что-то.
Всё работает, спасибо! Хороший плагин, главное, нужное меню правильно в настройках ввести)
Все работает! Норм!!!
а как увеличить ширину? чтобы некоторые позиции не перескакивали на строку ниже?
С помощью CSS стилей. Может помочь плагин – SiteOrigin CSS. Также рекомендую посмотреть плагины:
– Simple Custom CSS.
– Custom CSS Pro.
Здравствуйте. Как данный плагин myStickymenu адаптировать под планшеты и мобильники?
Здравствуйте. А зачем ? Сколько у вас страниц в меню ? И представьте все они будут отображаться на мобильном устройстве, ещё и зафиксированные на пол экрана. Можно адаптировать с помощью CSS. Вам нужно указать другой размер для отображения мобильного меню в CSS. Если указать размер меньше минимального, то мобильное меню вообще не будет отображаться. CSS название мобильного меню можно узнать, нажмите правой кнопкой мыши по моб.меню, в открывшемся окне нажмите – Показать код, в редакторе будет указан CSS и название.
Код CSS для изменения размера и скрытия можно посмотреть Здесь !!!
А как сделать липким не меню сайта, а панель с контактными телефонами и ссылкой на корзину? Это другой плагин нужен?
Здравствуйте. Вам может помочь плагин SiteOrigin CSS. В редакторе перейдите на вкладку Layout и для параметра Position укажите значение Fixed. Предварительно выделив ту часть на сайте, которую хотите зафиксировать.
Спасибо большое! Кажется, это то, что надо. А как здесь настроить, чтобы подвижная панель перемещалась поверх картинок, а не за ними?
Надо подумать. Не могу вам точно сказать пока что.
Вообще-то фиксированный элемент должен отображаться поверх остального контента по умолчанию. Только что проверял на черновом сайте.
Может это зависит от того, какой элемент двигать?
Я по-пробовал закрепить панель корзины, где написана сумма текущего заказа. А вообще хотел просто сделать строку с телефонами, которая скролится вместе со страничкой.
Априори, элемент не может быть зафиксирован под основным контентом, его не будет видно вообще. Могу порекомендовать вам плагины для отображения контактов:
– Mobile Contact Bar.
– Speed Contact Bar.
– WPFront Notification Bar.
Я сделал то, что мне было нужно. Огромная благодарность!!!
распишите для чайника где искать класс меню? не получилось ничего.
В исходном коде, на скриншоте показал. Вы наверно не тот класс взяли, попробуйте другой.
я зафиксировала, но полоса с меню прозрачног цвета. в плагине нет возможности выбрать цвет как у вас в статье, у меня другие значения и цвета нет. как сделать цветную полосу меню?
Изменить стили меню. Может помочь плагин SiteOrigin CSS.
Спасибо, то что искал!
Спасибо большое за статью! Честно говоря, посмотрев ролик, не разобралась, как-то се быстро, мелко и без пояснений. А после прочтения этой статьи, у меня все получилось ))).
за пару вечеров нашел массу полезных решений для сайта, хотя делаю сайт на wc пару недель.
искренняя благодарность!
А как сделать, чтобы меню пои прокрутке меняло цвет. Допустим на фоне оно прозрачное, а при прокрутке другой цвет?
Есть плагин SiteOrigin CSS, он может вам помочь.
Установил сайт на лендинге (сделан на элементоре), не сработал плагин.
Конечно не сработал. Сработает только на теме WordPress.
Все ясно с этим плагином! Прописал кодом.
Спасибо, дружище, отличный подгон)