Эта страница может содержать партнерские ссылки. Если вы совершите покупку по этим ссылкам, я могу получить комиссионные без каких-либо дополнительных затрат для вас.
Если вы используете ElementorKit для своего сайта и столкнулись с проблемой, когда наложение мобильного меню не позволяет пользователям закрыть меню, вы не одиноки. Это известная ошибка, при которой меню остается видимым, хотя пользователи могут прокручивать страницу. Кнопка закрытия «X» перестает реагировать, что приводит к разочарованию пользователя. К счастью, есть простое решение этой проблемы.
Понимание проблемы
Проблема возникает из-за противоречий значения z-индекса в наложении мобильного меню и контейнере меню. Наложение закрывает кнопку закрытия, делая невозможным взаимодействие пользователей с ней. В результате меню остается открытым, даже если пользователи пытаются закрыть его или щелкнуть за пределами области меню.
Пошаговое решение
Вот как можно решить эту проблему, отрегулировав значения z-индекса в Elementor:
1. Откройте заголовок в Elementor
- Navigate to your WordPress dashboard.
- Перейти к Шаблоны > Сохраненные шаблоны и найдите свой заголовок.
- Нажмите Редактировать с помощью Elementor чтобы открыть шаблон заголовка в Elementor редактор.
2. Отрегулируйте z-индекс наложения
- Выберите контейнер который содержит наложение мобильного меню.
- Под Расширенный вкладку, прокрутите вниз до Пользовательский CSS раздел.
- Добавьте следующий CSS-код:
z-index: авто !важно;
Это гарантирует, что z-индекс наложения не переопределяет кнопку закрытия и не мешает взаимодействию пользователя.
3. Установите высокий z-индекс для меню
- Теперь выберите мобильный контейнер меню (элемент, содержащий пункты меню и кнопку закрытия).
- Под Расширенный вкладку, найдите z-индекс поле.
- Установите z-индекс на 5000 специально для мобильного просмотра. Вы можете сделать это, переключившись на отзывчивый режим в Elementor и выбрав мобильный вид.
- Вид рабочего стола: Оставьте z-index как есть.
- Мобильный вид: Установить z-index на 5000.
4. Сохранить и проверить
- Сохраните изменения, нажав Обновлять.
- Проверьте свое мобильное меню, чтобы убедиться, что наложение больше не блокирует кнопку закрытия, а меню закрывается должным образом при щелчке за его пределами или при использовании кнопки «X».
Почему это работает
Значение z-index наложения по умолчанию часто слишком велико, из-за чего оно располагается над интерактивными элементами, такими как кнопка закрытия. Задав z-index наложения равным авто и увеличиваем z-index меню до 5000, вы отдаете приоритет меню и его интерактивным элементам над наложением.
Заключительные размышления
Этот конфликт z-index в ElementorKit является распространенной ошибкой, но с помощью приведенного выше решения вы можете быстро исправить проблему и восстановить ожидаемое поведение вашего мобильного меню. Поддержание функциональности вашего мобильного меню имеет важное значение для пользовательского опыта, особенно с учетом того, что мобильные пользователи составляют значительную часть веб-трафика.
Если проблема сохраняется, несмотря на эти изменения, рассмотрите возможность обращения в службу поддержки ElementorKit за дополнительной помощью.
