Чтобы меню на сайте WordPress не превращалось в бургер в мобильной версии, можно использовать CSS-медиазапросы для изменения внешнего вида меню в зависимости от размера экрана.
Первым шагом необходимо добавить класс или идентификатор к вашему меню в коде шаблона WordPress. Обычно это делается через функцию wp_nav_menu()
. Например, вы можете задать класс main-menu
для вашего меню, указав следующий код:
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'main-menu', ) );
Когда у вас появится указанный класс (например, main-menu
), вы сможете изменять его внешний вид с помощью CSS-медиазапросов. Ниже приведен пример CSS-кода, который сохранит обычный вид меню при ширине экрана больше 768 пикселей и переключит его на бургер при более узком экране:
@media screen and (max-width: 768px) { .main-menu { display: none; /* Скрыть обычное меню */ } .burger-menu { display: block; /* Показать бургер-меню */ } } @media screen and (min-width: 769px) { .main-menu { display: block; /* Показать обычное меню */ } .burger-menu { display: none; /* Скрыть бургер-меню */ } }
Вы можете настроить значения ширины экрана и классы так, чтобы они соответствовали вашим потребностям. Например, вы можете изменить значение max-width
в первом медиазапросе, чтобы меню переключалось на бургер при более широком или уже при более узком экране. Также измените классы main-menu
и burger-menu
на те, которые вы использовали в своем коде.
После того, как вы добавите этот CSS-код в свою тему WordPress, ваше меню будет отображаться как обычно при ширине экрана больше 768 пикселей и переключаться на бургер при более узком экране.