Как сделать «Липкое» меню в WordPress и Elementor

Как сделать «Липкое» меню в WordPress и Elementor


Hello friends! You’re on the WPlovers channel where we’re talk about WordPress with love and in understandable language and in this video you will see how to do sticky menu in two kinds in WordPress using Elementor you can also use this method with WordPress only But we’ll do it with Elementor Let’s go! So to this sticky menu you will need to: myStickymenu plugin. Install and activate it. And if you’re use the Elementor, you need to find NavMenu Addon For Elementor plugin install and activate it too So, as I’ve shown I have two kinds of menu Transparent and then in block when sticky And the second kind is in the wide block that becomes smaller when sticky And the logo becomes smaller too I hope that you installed the plugins and firstly let’s do preparations to create sticky menu I’m opening a page with Elementor Here it is. And now I’m going to show you how did I do this I placing a section to divide before/after visually

About the author

Comments

  1. Нравятся видео про Elementor? Поддержите выпуск новых! http://donatepay.ru/donation/wplovers

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

    Поддержать WPlovers http://donatepay.ru/donation/wplovers

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

    Спасибо! http://donatepay.ru/donation/wplovers

  2. Можно ли сделать так, чтобы в планшетной версии логотип становился больше и центрировался на странице, а меню располагалось под ним?

  3. Добрый день! В чем может быть проблема, настроил липкое меню, настроил всплывающее окно меню, настроил карусель изображений. Все отлично работало. Где-то через 4 месяца зашел на сайт вот эти пункты перестали работать. Остальные виджеты работают корректно. В чем может быть проблема уже все перепробовал?

  4. Почему-то функция прилипания не работает.
    Вроде бы все сделал по инструкции
    сайт https://kvizeinshtein34.ru/
    тема sydney
    в настройках плагина myStickymenu:
    Sticky Class: elementor-menu.eltoggled-on
    Disable at Small Screen Sizes less than 200 px
    Disable at Large Screen Sizes more than 200 px
    Make visible on Scroll after 100 px.
    Make visible on Scroll at homepage after 100px.
    CSS style: #mysticky-wrap { } #mysticky-nav.wrapfixed { } #mysticky-nav.wrapfixed.up { } #mysticky-nav.wrapfixed.down { } #mysticky-nav elementor-menu.eltoggled-on { } #mysticky-nav elementor-menu.eltoggled-on.myfixed { }

    В настройках виджета Default Navmenu в Elementor:
    CSS ID: elementor-menu
    CSS классы: elementor-menu.eltoggled-on

    CSS ID и CSS классы нашел в коде страницы при помощи F12 (об этом прочел вот здесь https://wp-system.ru/sozdanie-sayta/plaginyi-dlya-wordpress/kak-sdelat-lipkoe-menyu/ после того, как произвольно их задать не получилось.

    Где я допустил ошибку? Пробовал поменять тему – никакой реакции.

  5. Здарвствуйте! У меня стоит тема etalon, пишет, что эта тема не поддерживает header footer elementor plugin, все вроде делал как надо, но меню ни в какую не хочет липнуть, я все настроил в плагине, правильно прописал css классы, в настройках через точку прописал то же, что и в css класссе меню, но ничего не происходит, меню не липнет. Как вы считаете, может ли быть проблема в теме?

  6. Подскажите пожалуйста как сделать боковое левое меню на всю высоту экрана, при этом нажимая по ссылкам из меню контент справа просто бы менялся в зависимости от пункта меню. Обновлялась бы страница не в новой вкладке а в текущем окне. Можно ли с помощью елементор сделать нечто похожее? http://lmpixels.com/wp/unique/#home

  7. Друзья привет! Может кто знает существует ли плагин, который сделает твой сайт адаптивным для разных браузеров. Я сделал сайт, но он плохо отображается во всех браузерах кроме гугла. Кто знает подскажите пожалуйста!

  8. Благодарю за полезный обзор! Это расширение настраивается легко и чётко, что радует))
    Также есть вопрос, в этом видео на 03:29 менюшная кнопка "Сладости" обведена точечно-пунктирной линией.
    Я это вижу постоянно. Она еще бывает анимированной – концентрически сжимается словно удавка и замирает вокруг линка. Но и фиг бы с ним — ни на что не влияет, однако уже который клиент жалуется на этакий безобидный эффект, появляющийся периодически на пунктах меню и других ссылках на страницах (на самом деле это бывает только при очередном повторном нажатии на этот линк когда они активно тыкают на все кнопки сайта)

    Они ассоциируют этот эффект с некой ошибкой интерфейса. В общем напрягает.
    Будут ли разработчики с этим что-то делать? Что можно сделать самому сейчас?

  9. Добрый день. Большое спасибо за видео. Очень полезно.
    Подскажите пожалуйста, как сделать текст левее в меню в мобильном версии сайта, если слева находится логотип ?

    Скриншот https://yadi.sk/i/GOh6pK_PJ38qJQ

    Спасибо за внимание

  10. Добрый день есть ли возможность сделать "Липкое "меню справа старницы посредине

  11. Здравствуйте! Подскажите, пожалуйста Elementor платная версия покупается один раз? Или нужно покупать на каждый новый сайт?

  12. Во всех темах уже стоит меню по умолчанию изначально. Как удалить старое меню?

  13. Здравствуйте! Можно ли как то сделать что бы меню на мобильных версиях не расширяло блок, а как бы налазило на него? Как это сделано в Pro версии.

  14. Скажите пожалуйста как через меню переключиться на другую созданную страницу?

  15. Большое спасибо. Неделю уже не могу сделать сайт. Точнее не могу именно так как мне надо Видео как раз таки то что надо для меня. Только вот с якорь меню не понял, вы его сделали или только липкое меню?Завтра буду делать, очень надеюсь что видео актуально в данное время, еще раз спасибо за полезную информацию

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

  17. Здравствуйте! Хочу спросить: как добавить меню на страницы многостраничного сайта на WordPress? Просто я сделала липкое меню по вашему уроку, но теперь не знаю, как добавить его на все страницы сайта, чтобы выделялся другим цветом раздел, в который сейчас зашел посетитель сайта? Если добавлять его как сохраненный шаблон, то раздел не горит другим цветом, а просто висит меню сайта и все!
    То же самое касается и футера: может он автоматически появляться на всех страницах сайта или его надо добавлять всегда вручную как сохраненный шаблон?
    Просто, если брать стандартное меню темы Astra, то меню и футер добавляются автоматически всюду на всех разделах и страницах сайта, а при создании собственного меню и футера такой функции нет почему-то?
    Помогите, плз!!! Заранее благодарю за ответ и совет:-)

  18. Здравствуйте! Не могу никак с мобильной версией шапки решить ((
    Если что-то меняю в адаптации для мобильной версии, чтобы шапку подправить, то в компьютерной все меняется тоже и уже шапка не та. Пробовал сделать второе меня для моб. веррсии и скрыть ее от компьютерной, но в таком случае шапка становится уже не липкой. Подскажите пожалуйста, что иенно я делаю неправильно. Спасибо!

  19. А если у меня фоном секции, идет картинка, то как сделать что бы она так же липла? Не получается по аналогии…

  20. Ребята, привет. Подскажите пожалуйста как удалить верхнюю часть с регистрацией над меню и где и как управлять этими полем, спасибо. Вот скрин: http://prntscr.com/lncn01

  21. Александр, а как можно сделать уменьшение логотипа и замену прочих стилей без дополнительных плагинов, если установлен Elementor Pro и крокоблок только?

  22. Самый лучший и мой любимый канал о работе с Elementor!
    У меня возникла проблема при создании меню в Default Navmenu..
    Все настроила, на предпросмотре Elementor меню работает, а после публикации на странице меню стает не кликабельным! Как исправить? В чем проблема?
    Заранее благодарю!

  23. да только я так и не понял как ты создал липкое меню которое смог потом выбрать из списка??

  24. как оно у тебя в элементор появилось в списке что ты на него смог переключиться????

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

  26. Здравствуйте! И это снова я😊 Подскажите, плз, как поменять цвет иконок выпадающего меню в моб версии сайта? Все сделала по вашему уроку, уже несколько раз меняла цвет в настройках, а он все равно черный!!! Помогите, плз!!! Заранее благодарю за ответ и совет:-)

    Скрин прилагаю!!! http://joxi.ru/xAevx0JipN0nBr

  27. Здравствуй, Класс, сделал по первому способу липкое меню, сделал произвольную ссылку на блог вкладки в элементоре, и вставил эту ссылку в картинку, теперь при нажатии на картинку пере ходится в блог сделанный виджетом вкладки, все классно, но в этом блоке нет липкого меню и нет крестика чтоб закрыть, приходится возвращаться на главную нажатием стрелки НАЗАД в браузере, но это ж не нормально, что я не так сделал, подскажите? Благодарю.

  28. Спасибо. Давно хотел спросить,Алексей, можно ли с помощью css или в самом плагине "меню" сделать так что бы при наведении под словами или над ними появлялась чёрточка и как убрать грёбаную стрелку возле ссылки на выпадающее меню )) ?

  29. У вас гениальный канал! Спасибо огромное! Как все здорово сделано: полезно, без воды, качественный звук!

  30. Подскажите пожалуйста, куда делся плагин myStickmenu Не находит такого плагина…?????? За ранее спасибо!

  31. Помогите, пожалуйста. Я купил elementor pro, но не могу избавиться от стандартного хедера в теме, чтобы полностью помнять его на елементорский. Как это сделать, чтобы потом можно было бы якоря в меню навигации ставить? Стандартный меню хедер в елементоре не редактируется

  32. здравствуйте. а есть возможность сделать такое меню, но скажем с помощью power builder? так как сейчас все страницы собираю на нем, боюсь менять конструктор, ведь может все полететь. а мне надо собрать только меню такое.. помогите плиз)

  33. вставил меню из плагина, почему то наслаивается на родное меню. непонятно где убрать родное меню?

  34. Нехрена не понятно, но жутко интересно))) А если серьёзно, то обзор клёвый – СПАСИБО WPLovers! Но всё очень быстро, не успеваешь уследить куда что переносится и вставляется. Про якорь вообще ничего не понял. Меню сделал сразу, но оно не липло и только после нескольких попыток получилось.
    Короче, для таких как я в танке), после всех манипуляций, о коих говорит
    WPLovers, надо не забывать сохраняться и обновляться, а за липучесть
    отвечает пункт – CSS классы
    , его надо пописать и тоже самое прописать в настройках myStickymenu – Липкий класс, и не забыть сохранить изменения.

  35. Меню если размером меньше 20, какое то дёрганое, при 20 стоит ровно, но получается слишком крупное. Выпадающее меню просто пулей вылетает, что очень не приятно,как отрегулировать не нашёл.

  36. Благодарю за прекрасный урок. Всё работает. Но появился проект, в котором нужно чтобы было плавающее меню слева. Понимаю, что и меню елементора не подходит, скорее всего, и необходимо менять css stickymenu или другой плагин например для плавающих опросов. Были ли уже такие пробы? И еще про елементор, есть ли возможность вставлять внутренние секции вертикально, чтобы добавить в нее логотип, пункты меню и кнопки соц.сети?

  37. Доброго времени! У меня вопрос: а как поместить в липком меню кликабельный номер телефона?

  38. Добрый день. Спасибо за полезные уроки. Очень информативно. Отличная скорость подачи материала! Вопрос такой. Сделал липкое меню, но при добавлении изображений в секции страницы и прокрутке страницы вверх или вниз изображения наплывают поверх меню. Как это исправить?

  39. Супер!!! Так редактировать меню гораздо проще, чем кодом и это не сказывается на загрузке страницы!Теперь я пишу многостраничный сайт и уже отработал несколько страниц. ПОЛУЧАЕТСЯ и дизайн, и перелиновка.В общем супер этот парень учит!!! Доделаю – похвастаюсь!)))

  40. Пробую сделать два меню: одно на компьютерах, другое (сандвич) для планшетов и мобильных. Но прилипает только какое-то одно из них. В чем может быть проблема?

  41. А можно так же это сделать с плагином jetmenu так же что бы оно отображалось на прозрачном фоне как на 1:49 Не могу понять как это сделать, и что бы при пролистывании оно становилось на белом фоне

  42. Здравствуйте, помогите разобраться пожалуйста. У меня меню из двух секций, в верхней секции есть лого и там еще пару колонок, а в нижней секции само меню, липким хочу сделать лого из верхней секции меньшего размера и меню из нижней секции, что то типа такого http://esg-moscow.ru/
    Как это можно сделать?
    fixed-logo колонки с лого не помогает(

  43. Вот сайт, который я сделал благодаря этим видео! Судите сами друзья! А автору еще раз огромное спасибо!!! https://салон-спб.рф

  44. Для тех кто из 2019 и не смог удалить вторую секцию – удалять через "Навигатор"

  45. Прошу не кидать тапки, я вот только начала постигать этот не простой мир вордпресса с его плагинами и благодаря вам разобралась с Elementor 🙂 ну почти))))
    Так вот, идя по пути женской логики я как бы начала все с конца и уже почти готова у меня главная страница моего сайта и тут "бац" ваш урок про приставучей шапке, ну вот захотелось сделать мне ее, но у меня то уже есть в теме Астра (+Astra Starter Sites) шапка с меню….и вот никак я не разберусь, куда деть ту шапку и меню, которое уже впринципе прибито на сайт. Или нужно создавать новую страницу под липкое меню? Подскажите пожалуйста 🙂

  46. Здравствуйте! Спасибо огромное за ваши обучающие видео, очень доступно, интересно и так круто – делаешь по ним и все получается!:)
    Веду следствие по пропаже липкого меню. Все было с ним отлично, все работало, но в какой-то момент оно пропало. Точно было до знакомства с Cleafy, Clear Cashe, Smart Slader. Подозреваю Cleafy, но улик не нашла и следствие стало в тупик (следователь совсем "зеленый"). Вдруг, вы можете посодействовать следствию – что может быть причиной пропажи?

  47. Александр, здравствуйте, не нашел в настройках, как сделать что бы фон секции, (стоит картинка), увеличивался под разные разрешения экранов? С виджетом изображения получилось, но на него к сожалению кнопку по верх не поставить.

  48. Можно ли отключить показ Sticky menu на телефонах или отключить в Elementor показ секции на телефонах?

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

  50. Добрый вечер. Спасибо за ваши видео, очень полезно.

    Столкнулся с такой проблемой: создаю меню (но это относится и к любым другим элементам: картинки, кнопки и ТД) публикую – при просмотре в браузере все ок. Затем прописываю класс css в редактирование меню, как в видео , публикую и колонка меню сжимается и смещается влево(при открытие страницы в любых браузерах). При этом при прилипании отражается корректно во всю ширину. Такой же глюк наблюдается при добавлении css вручную любому элементу.
    Может быть Вы сталкивались с такой проблемой и можете помочь?

    2. Также есть такая проблема: при настройке адаптивности, если сначала подкорректировал настройки элемента в режиме телефона , а после в режиме планшета, то на телефоне начинают отражаться настройки планшетный версии, даже если снова откорректировать настройки элемента для телефона. Те приходится строго соблюдать последовательность комп-планшет-телефон. И в случае если надо что то подправить после на планшете, настройки телефона слетают и поправить это уже нельзя :/

  51. Elementor Версия 2.5.9
    Elementor Pro Версия 2.4.8
    myStickymenu начал работать не корректно. Сначала и не понял что проблема именно в нем. В общем, при работе плагина, меню сжимается до меньших размеров. У кого такое наблюдается, есть решение:
    Настройки плагина > вкладка "Style" > настройка "CSS-стиль". В это поле после того что там есть добавляем то что в строке ниже:
    #mysticky-wrap { width: 100%; }
    Сохраняем и радуемся результату.

  52. отличное видео, все получилось, только вот вопрос: можно ли сделать Submenu не колонкой, а горизонтально, у меня оно в 8 пунктов и не красиво получается когда такой длинный столбик вылазит

  53. Вопрос такой, при использовании стики меню, в мобильной версии, в место "гамбургера" квадратик, как будто шрифт не подгружен, в какой стороне искать решение, подскажите, пожалуйста

  54. Здравствуйте Всем. Помогите решить Проблему. По видео начал делать Липкое меню Но оно НЕ РАБОТАЕТ. и НЕ ПОЙМУ НЕ КАК И ПО ЧЕМУ. ПОМОГИТЕ. Всё делал по видео точь в точь Установил все программы всё четка как на видео. Прошел весь процесс но не работает Я скопировал код с описания и всё равно НЕ РАБОТАЕТ в описание стоят # с ними не работает, вместо поставил ТОЧКИ и с ними тоже НЕ РАБОТАЕТ. В самом ВИДЕО другой код вписал его да и с ни тоже НЕ РАБОТАЕТ. начал читать комменты увидел что стояла вроде тема ASTRA поставил её и угадайте всё равно НЕ РАБОТАЕТ. Версия ELEMENTOR стоит 2.5.13 И также есть ПРО Elementor PRO версия 2.5.5 Хотел сделать меню Липкое вмести с Лого как на видео именно второй Вариант. Надеюсь на помощь

  55. Доброго времени суток. А если у меня есть "липкое" меню уже в самой теме, как-то можно через elementor menu вставить в это меню новую станицу , или только нужно делать через "елементор меню" новое меню?

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

  57. Здравствуйте. Подскажите, если Header взят из готовых шаблонов Elementor Pro и состоит из двух секций, как быть с CSS классами? Если обеим секциям присвоить один класс, то в липком меню отображается только первая секция.

  58. Я одного блядь понять не могу, куда ты сука торопишься, можно помедленей объяснить:?????????????????????

  59. myStickymenu был закрыт 17 мая 2019 года и больше не доступен для скачивания. Как быть теперь?)

  60. функция с уменьшением размера прилипающего меню при прокрутке доступна только в платной версии myStyckymenu, замечательно 😉 было бы хорошо, если бы вы записали видео как плебеям с free версией выкручиваться в такой ситуации)

  61. Привет. Замучался искать решение. )) Не подскажешь, как убрать вот такое меню в Woocommerce http://prntscr.com/nzzfs1. Делаю сейчас магазин с помощью этого плагина и Elementor Pro

  62. Добрый, день. Как сделать так, чтобы в версии для ПК липкое меню было, а в мобильной версии оно отсутствовало?

  63. Спасибо за урок, сам бы не додумался. На одном сайте получилось без проблем. Стал делать на другом – по той же схеме, с теми же настройками – меню при прокрутке скачет до упора влево и ничего не могу с этим поделать. Может кто сталкивался, из-за чего это может быть?

  64. Я так понимаю, стили только в платной версии вставляются? Верно?

  65. Стили можно прописывать и в бесплатной версии – в кастом css темы, но это такой геморрой! Задаешь в виджете меню паддинги по умолчанию, а потом черт знает как их убирать при прокрутке!

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

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

  66. Хоть бы описание к этим дивам и классам давали!

    #mysticky-wrap { }

    #mysticky-nav.wrapfixed { }

    #mysticky-nav.wrapfixed.up { }

    #mysticky-nav.wrapfixed.down { }

    #mysticky-nav .navbar { }

    #mysticky-nav .navbar.myfixed { }

    Кстати, на видео и элементор и плагин устаревшие.

  67. добрый вечер!
    У меня почему-то меню отображается только на треть экрана, то есть остальное место остается прозрачным.
    а когда уже прокручиваю оно заполняется и начинает работать нормально. Ну а когда опять пролистываю на самый верх эта дырка опять появляется…
    Что делать? Подскажите пожалуйста.

  68. Здравствуйте, спасибо большое за ваши видео!
    Подскажите пожалуйста как сделать, чтобы при наложении выпадающего меню на другое меню, это другое меню не просвечивалось в выпадающем.
    https://i.ibb.co/5sYqSjm/2019-07-04-11-50-18.png

    https://i.ibb.co/mHCvpVW/2019-07-04-11-50-25.png

  69. Хотел создать такую же шапку https://geniuscourses.com/courses/ как тут, уже неделю пытаюсь, нихрена не выходит, боюсь придется отказаться от этой идеи.
    В твоем меню хрен там нормальные анимации сделаешь, мало возможностей и кнопку в меню хрен добавишь.

  70. Спасибо за урок!
    Не получается настроить. Почему основное меню улетает влево, а липкое при этом остается на нужном месте? Благодарю за ответ.

  71. У кого есть баги с myStickymenu, можете скачать аналог Sticky Menu (or Anything!). Принцип тот же

  72. Здравствуйте! Огромное спасибо за видео! Подскажите как менять цвет при наведении у Логотипа (Логотип – текст)?

  73. Прекрасное видео, благодарю! Но на 24.08.2019 г. Уже многое там не актуально наверное время идет и все меняется. Только одно понять не смог почему липкое меню не на всех страница появилось хотя в меню все страницы добавил. Вот сайт который я сам лично создал благодарю этому каналу https://poliscentr.ru/ и за который у меня просили от 120000 тыс руб.

  74. Подскажите, как сделать "липкую кнопку", которая постоянно была бы на странице при прокрутке

  75. Здраствуйте, у меня не работает меню на моб.версии (фон есть но иконки как и пунктов меню нету), возможно что-то подскажете

  76. Нихуя не получилось, вставил логотип и он дублируется по всей ширине, а не как на видео показано

  77. Создал список меню как ты показал, а в редакторе там где Select Menu я выбрал своё меню, но меню не отображается ни 1 Слова

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

  79. У меня проблема стики меню меняет позицию меню с левой стороны на правую в режиме просмотра как это вылечить?

  80. Вопрос такой, при использовании стики меню, в мобильной версии, в место "гамбургера" квадратик, как будто шрифт не подгружен, в какой стороне искать решение, подскажите, пожалуйста

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

  82. Привет , как сделать меню в бесплатной версии нашел только про версию

  83. так и не понял в элементр что ли такого нельзя сделать,
    штатными возможностями?

  84. NavMenu Addon For Elementor коряво устанавливается на мобильной версии, как с этим разобраться?
    или может другие менюшки есть?

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

  86. Огромное спасибо, но у меня есть вопрос, как сделать чтобы эти ссылки работали?

Leave a Reply

Your email address will not be published. Required fields are marked *