Как сделать чтобы меню на сайте wordpress, в мобильной версии не уходило в бургер?
На сайте https://opendag.ru при открытии мобильной версии главное меню сайта уходит в бургер. Хочу чтобы ничего не менялось, а меню оставалось на своем месте. Как это сделать?
Дополнительно:
На сайте https://opendag.ru при открытии мобильной версии главное меню сайта уходит в бургер.
Не уходит (это 2 разных меню). В мобильной версии элемент .primary-navigation-wrap имеет стандартную видимость, а вот элемент горизонтального меню nav.site-navigation - скрыт, и наоборот в десктопной версии.
https://opendag.ru/wp-content/themes/gucherry-blog...:
Вернуть меню в мобильной версии, строка 15141, заменить:
.site-navigation { display:none; margin-top: 10px; padding: 0 } |
.site-navigation { display:none; margin-top: 10px; padding: 0 }
На:
.site-navigation { /* display:none; */ margin-top: 10px; padding: 0 } |
.site-navigation { /* display:none; */ margin-top: 10px; padding: 0 }
Убрать бургер-меню в мобильной версии, строка 15137, заменить:
.menu-toggle { display: block } |
.menu-toggle { display: block }
На:
.menu-toggle { /* display: block; */ } |
.menu-toggle { /* display: block; */ }
Предположу, что css подключается в https://opendag.ru/wp-content/themes/gucherry-blog..., соответственно, для принудительного сброса кэша - необходимо изменить версию файла с main-style.css?ver=6.1.1 на main-style.css?ver=6.1.2:
function theme_enqueue_styles() { wp_enqueue_style('custom-style', get_template_directory_uri() . '/assets/dist/css/main-style.css', array(), '6.1.2'); } add_action('wp_enqueue_scripts', 'theme_enqueue_styles'); |
function theme_enqueue_styles() { wp_enqueue_style('custom-style', get_template_directory_uri() . '/assets/dist/css/main-style.css', array(), '6.1.2'); } add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
В мобильной версии, изменения будут выглядеть не очень, но задача была не в красоте.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Если в мобильной версии меню уходит в бургер, это обычно не “одно меню изменилось”, а две разные навигации: desktop-меню скрывается на малой ширине, а mobile-меню показывается. Чтобы оставить горизонтальное меню на мобильном, нужно переопределить CSS темы, но это не всегда хорошая идея: длинное меню может не помещаться на экране и создать горизонтальный скролл.
Если всё равно нужно показать desktop-меню, ищите media query, где тема скрывает
.site-navigationи показывает кнопку бургера. В вашем случае логика примерно такая:@media (max-width: 767px) { .site-navigation { display: block; } .primary-navigation-wrap, .menu-toggle, .mobile-menu-toggle { display: none; } }
Классы надо уточнять по конкретной теме через инспектор. Важно: если пунктов много, добавьте горизонтальную прокрутку только для меню, а не для всей страницы:
@media (max-width: 767px) { .site-navigation ul { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .site-navigation li { flex: 0 0 auto; } }
Так меню останется в строку, но не сломает ширину сайта. Однако с точки зрения UX бургер на мобильном часто лучше. Если меню короткое: 3-4 пункта, горизонтальный вариант нормален. Если пунктов больше, лучше оставить бургер или сделать компактную нижнюю навигацию.