Как настроить меню на сайте WordPress таким образом, чтобы в мобильной версии оно не превращалось в бургер-меню?

Как сделать так, чтобы главное меню на сайте https://opendag.ru не превращалось в иконку бургер-меню при просмотре на мобильных устройствах и оставалось на своем месте?
  • 28 сентября 2023 г. 6:37
Ответы на вопрос 2
Чтобы меню на сайте WordPress не превращалось в бургер-меню на мобильных устройствах, вы можете использовать CSS-медиа-запросы, чтобы изменить стиль меню для мобильных экранов. 

Вот несколько шагов, которые могут помочь вам настроить меню:

1. Откройте админ-панель вашего сайта WordPress и перейдите в раздел "Внешний вид" -> "Редактор темы".

2. В появившемся окне выберите файл style.css из списка файлов темы.

3. В самом верху файла добавьте следующий код:

```css
@media screen and (max-width: 767px) {
  .main-navigation {
    display: flex !important;
  }
  .main-navigation ul {
    display: flex !important;
  }
  .menu-item {
    display: inline !important;
  }
}
```

Этот код изменит стиль меню на мобильных экранах шириной до 767 пикселей. Вы можете изменить это значение в соответствии со своими потребностями.

4. Нажмите кнопку "Сохранить файл", чтобы сохранить изменения.

5. Проверьте ваш сайт на мобильном устройстве, чтобы убедиться, что меню остается на своем месте без превращения в иконку бургер-меню.

Обратите внимание, что этот метод предполагает использование стандартного меню WordPress (`.main-navigation`). Если ваша тема использует другой класс или структуру HTML для меню, вам может понадобиться адаптировать код в соответствии с этими изменениями.
На сайте https://opendag.ru, при просмотре мобильной версии, главное меню переходит в вид "бургер". В мобильной версии меню с классом "primary-navigation-wrap" видно, а меню с классом "site-navigation" скрыто, и наоборот в десктопной версии. Чтобы вернуть основное меню в мобильной версии, нужно изменить код в строке 15141, заменив следующий блок:
```
.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; */
}
```
Предполагается, что CSS файл подключается через ссылку: https://opendag.ru/wp-content/themes/gucherry-blog... Для обновления кэша и принудительного обновления стилей нужно изменить версию файла на main-style.css?ver=6.1.2 в функции 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');
```
В мобильной версии это может выглядеть не очень красиво, но основная задача не визуальная.
Похожие вопросы