Любой создаваемый сайт имеет меню навигации, особенно это относится к таким сайтам как сайт- визитка и бизнес-сайт (сайт компании). Современные сайты требуют аккуратного меню с возможность адаптивности т.е возможность воспользоваться меню и на мобильных устройствах. 
В конструкторе сайта Elementor существует виджет "Меню навигации" и он в большей степени отвечает современным требованиям меню, особенно в конструкторе. Он имеет множество настроек и опций, стилевых оформлений и возможности адаптироваться под мобильные устройства.
Как только мы разместим виджет на странице мы увидим один из вариантов. На рисунке ниже два варианта, первый если у вас нет настроенного меню и второй, если у вас есть какое либо настроенное меню.
Настройки виджета меню
Содержание
- Макета
- Меню - выбор меню для отображения.
- Макет - тип меню. Доступно 3 вида меню это Горизонтальный, вертикальный и выпадающий т.е свернутый в кнопку.
- Выровнять - выравнивание меню в любую сторону и растягивание по ширине. (Лево Центр Право Растянуть)
- Указатель - тип указателя для активного (или под курсором) пункта меню. Доступны различные типы указателя (линия снизу пункта, сверху пункта, двойная линия, обрамление, фон, текст. ) Для каждого типа доступна анимация.
- Индикатор подменю - вид индикатора для указателя подменю (классика, шеврон, угол, плюс)
Выпадающее меню на мобильных
- Разрыв - ширина экрана при котором сработает адаптивность для меню. Если выбрать только "Телефон", то на планшете меню будет отображаться так же как и на настольном компьютере.
- Во всю ширину - позволяет растянуть выпадающее меню во всю ширину экрана (действует только для выпадающего меню при адаптивности)
- Выровнять - выравнивает пункты выпадающего адаптивного меню по левому краю или по центру.
- Переключатель - тип переключателя, гамбургер (кнопка) или отсутствие его. Если тип переключателя выбран "Нет", то меню на мобильных просто будет в раскрытом виде, а не спрятано в кнопку.
- Выровнять переключатель - положение переключателя относительно меню (слева, справа или посередине)
Стили
- Главное меню
- Цвет - цвет текста главного меню (возможность задания значения для разного состояния пункта меню)
- Типографика - типографика текста главного меню (возможность задания значения для разного состояния пункта меню)
- Горизонтальный отступ - отступ пунктов меню слева и справа
- Вертикальный отступ - отступ пунктов меню сверху и снизу
- Расстояние - расстояние между пунктами (Не путать с горизонтальным отступом. При задании расстояния между пунктами, появляется расстояние и между указателями активности)
- Выпадающее меню (ниже перечислены возможности стилизации)
- Цвет текста, фона и типографика
- Тип границы, толщина линии и скругление углов
- Горизонтальный и вертикальный отступ между пунктами
- Разделитель (горизонтальная черта между пунктами). Возможно задать цвет, толщину и тип линии.
- Переключатель
- Цвет - цвет переключателя (гамбургера).
- Цвет фона - цвет фона переключателя.
- Размер - размер гамбургера (переключателя).
- Толщина границы - толщина границы у переключателя.
- Скругление углов - параметры скругления углов переключателя.
=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================
Меню навигации — виджет Elementor Pro: 18 комментариев
Здравствуйте, подскажите пожалуйста через какой плагин можно создать всплывающее меню, при наведении на пункт меню? например как здесь https://ukrope.com/ в «catalog»
Здравствуйте. Если только через отдельное меню типа MegaMenu итд
Добрый день. Сергей — «чайник»)) Решил создать сайт с «0», мучаюсь который день и не как не могу разобраться. Создав виджет навигационного меню в элементоре, не могу убрать меню вордпресса. Получается на главной странице два меню. Как решить эту проблему?
День добрый. У вас не меню ворпресс, а меню тема Астра 🙂 Убрать его скорей всего нельзя.. точно не помню. Посмотрите в настройках темы Астра.
Я делаю сайты на пустой теме Elementor или использую макет страницы Холст Elementor. Если делаю на теме Астра, то меню темы не трогаю.
Спасибо! Полечил) Всё-таки можно убрать в меню настроек темы.
Добрый день! Я, как и Сергей, — чайник)
На сайте установили ElementorPro. До этого работали с другим плагином. Тема Shapely. Сейчас работает старое меню. Оно не устраивает. Надо редактировать. Пытаюсь сделать новое меню на ElementorPro. Фигня какая-то получается. Пункты меню получаются на белой подложке. Указываю фон меню. Белая подложка (фон за шрифтом) не уходит. Что делать — не понимаю. Не получается так, чтобы просто буквы на общем фоне. Как у всех цветных меню. Подскажите, где установить прозрачность. И что это вообще такое?..
День добрый. Не подскажу вам по данной теме. Не работал я темой Shapely.
Возможно нужно устранять проблему написанием стилей. Если проблемы именно с совместимостью, вы можете написать в офф поддержку Elementor Pro, они подскажут (пишите им с емайла который использовали при покупки Elementor Pro).
Вообще, я не вижу большого смысла использовать сторонние темы, когда у Elementor возможностей больше чем у других тем.
Добрый день. Подскажите как сделать всплывающее окно при клике на пункт меню?
День добрый. У каждого пункта меню есть селектор class типа menu-item-118 (если посмотреть через инспектор кода в браузере). А у всплывающих окон есть возможность указать селектор для запуска окна. Вот в настройках и указываем.
Спасибо. Принцип я понял, но ни как не могу правильно вставить, подскажите пожалуйста более детально
Вот классы меню:
Моего инструмента нет в поиске
Моего инструмента нет в поиске
Что именно нужно вставить строку «открывать по селектору» и как?
Заранее спасибо)
li class=»menu-item menu-item-type-custom menu-item-object-custom menu-item-8106″ a class=»menu-link elementor-sub-item» Моего инструмента нет в поиске /a /li
Я показал пример класса. В вашем случаи он почти такой же. Так же в статье про всплывающее окно, есть описание как открывать по классу.
Добрый день, делаю меню на элементор и столкнулся с нюансом, как сделать разделительную линию между горизонтальными пунктами главного меню в шапке. Везде все посмотрел но так и не нашел.
Пример: Главная | Контакты | Услуги | и т.д.
День добрый. Можно через свои стили
.elementor-nav-menu li { border-right: 2px solid #fff; }
.elementor-nav-menu li:last-child { border-right: none; }
Спасибо большое, помогло). Только такой момент, когда в Custom CSS прописываю, оно дублирует стиль на все менюшки навигационные, можно как то задать только данную?
Например задать меню свой id и уже привязываться к нему, или использовать префикс selector как описано тут https://blog.web5x.ru/custom-css-v-konstruktore/
Здравствуйте! Подскажите, а можно ли как-то перенести слова в пункте меню. У меня название каждого пункта меню состоит из 2-3 слов и никак не сократишь. Меню не вмещается в одну строку. Происходит перенос меню на вторую строку. А мне нужно перенос слов в каждом пункте организовать. Чтобы само меню получилось в одну строку. Буду очень благодарна за ответ.
Здравствуйте. Попробуйте в названии пункта меню прописать тег < br > без пробелов