Вопрос или проблема
Я использую последнюю версию WordPress с темой festy.beautheme. Выпадающее меню не отображается на мобильных устройствах – или когда окно браузера очень маленькое. Это выпадающее меню, состоящее из трех линий. Когда вы нажимаете на него, должно появиться выпадающее меню.
На полном экране настольного компьютера все работает нормально – но когда я уменьшаю экран (или просматриваю его на мобильном), меню из трех линий действительно не создает выпадающее меню. Ничего не происходит, когда вы нажимаете на него. Вот ссылка. У кого-нибудь есть идеи?
http://bigplatinum.mydevportals.com/
Дело в том, что в файле style.css вашей темы на строке 12401 написан медиазапрос
@media (max-width: 991px)
.header__wrapper .main-menu3 {
display: none;
}
Сначала закомментируйте эту строку, теперь вы можете увидеть, что ваше меню отображается и в мобильном виде.
Чтобы переключать это при нажатии на три линии, вам нужно добавить немного кода jQuery:
$('.button-show').click(function(){
$('.main-menu3').toggle();
});
или вы можете достичь того же результата еще одним способом:
$('.button-show').click(function(){
$('.main-menu3').toggleClass('hide_menu');
});
Теперь в CSS вашей темы напишите следующий CSS:
.hide_menu{
display:none;
}
Дайте мне знать, если у вас есть еще сомнения.
Спасибо
С уважением,
Рави Таккар
Ответ или решение
Вопрос, с которым вы столкнулись — отсутствие выпадающего меню на мобильных устройствах или при уменьшении окна браузера, часто является распространенной проблемой при работе с темами WordPress. В данном случае необходимо учесть несколько аспектов для успешного решения этой ситуации.
1. Проверка CSS
По вашему описанию, проблема, скорее всего, связана с CSS вашего текущего шаблона. В стиле (style.css) темы festy.beautheme есть медиа-запрос на строке 12401, который отключает видимость меню на мобильных устройствах. Вот эта часть кода:
@media (max-width: 991px) {
.header__wrapper .main-menu3 {
display: none;
}
}Решение:
Для устранения проблемы вам необходимо закомментировать эту строку. Это позволит вашему меню отображаться на экранах с шириной менее 991 пикселя.
2. Добавление функциональности для отображения меню
После изменения стилей, вам потребуется добавить небольшую логику на jQuery, чтобы реализовать функциональность отображения меню при нажатии на иконку "три линии". Есть два варианта для этого:
Вариант 1:
$('.button-show').click(function() {
$('.main-menu3').toggle();
});Вариант 2:
$('.button-show').click(function() {
$('.main-menu3').toggleClass('hide_menu');
});3. Добавление CSS для скрытия меню
Если вы выбрали второй вариант, вам нужно также добавить следующий CSS код для управления видимостью меню:
.hide_menu {
display: none;
}4. Тестирование изменений
После внесения этих изменений обязательно протестируйте работоспособность вашего меню на мобильном устройстве или в инструментах разработчика, изменив размер окна браузера. Убедитесь, что при нажатии на "три линии" выпадающее меню появляется корректно.
Заключение
Решение проблемы с выпадающим меню на мобильных устройствах включает два основных этапа: исправление CSS и добавление функциональности на jQuery. По завершении этих шагов, ваше меню должно корректно отображаться и функционировать на мобильных экранах.
Если у вас возникнут дополнительные вопросы или проблемы, не стесняйтесь обращаться за помощью. Успехов в ваших дальнейших разработках!
С уважением,
[Ваше Имя]
IT Эксперт