Меню Bootstrap отображает переключатель в режиме рабочего стола.

Вопрос или проблема

<div id="nav">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Бренд и переключатель сгруппированы для лучшего отображения на мобильных устройствах -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Переключить навигацию</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>          
    </div>
    <?php
    wp_nav_menu( array(
            'menu'              => 'top-menu',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'navbar-collapse collapse',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
  </div><!-- /.container-fluid -->
</nav>

add_theme_support('menu');
require_once('wp-bootstrap-navwalker.php');
register_nav_menus(
   array(
        'top-menu' => 'Местоположение верхнего меню',
         'mobile-menu' => 'Местоположение мобильного меню',
      ));

<div class="d-sm-none">СКРЫТО НА ДЕСКТОПЕ</div>

.d-{breakpoint}-{value} для sm, md, lg и xl.

.

Ответ или решение

Проблема: Появление переключателя Bootstrap Menu на настольном режиме

Вы столкнулись с проблемой, когда панель навигации Bootstrap отображает переключатель (toggle) в настольном режиме, что является нежелательным поведением для вашего нового WordPress-темы. Давайте разберемся с возможными причинами и решениями этой ситуации.

Причины возникновения проблемы

1. Неправильная конфигурация классов и структуры:
   Ваша разметка меню может содержать классы, которые автоматически активируют переключатель навигации (navbar-toggle) даже на больших экранах. Обычно эта проблема связана с настройкой класса collapse, который используется для скрытия элементов в мобильной версии.

2. Отсутствие подходящих медиа-запросов:
   Даже если у вас установлены классы для отображения или скрытия элементов, отсутствие правильных медиа-запросов в CSS может привести к тому, что переключатель будет виден на большом экране.

3. Версия Bootstrap:
   Разные версии Bootstrap могут иметь разные классы и подходы к управлению адаптивностью интерфейса. Например, Bootstrap 3 сильно отличается от Bootstrap 4 по версии классов и конфигурации.

Возможные решения

1. Проверка классов навигации:
   Убедитесь, что вы правильно используете классы Bootstrap. Например, если вы используете Bootstrap 4, ваш код должен выглядеть следующим образом:

   <nav class="navbar navbar-expand-lg navbar-light bg-light">

   Также проверьте, чтобы класс collapse был прописан только для мобильной версии. Если необходимо, используйте классы navbar-collapse как collapse d-lg-block. Это позволит скрыть меню на больших экранах.

2. Использование классов скрытия:
   Вы можете использовать классы d-none и d-sm-block, чтобы скрыть переключатель на больших экранах. Например:

   <button type="button" class="navbar-toggler d-lg-none" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

3. Медиа-запросы CSS:
   Если классы не помогают, вы можете добавить собственные медиа-запросы в ваш CSS файл для управления видимостью переключателя:

   @media (min-width: 992px) { /* Размеры для экранов lg и выше */
      .navbar-toggle {
          display: none;
      }
   }

4. Консультация с документацией Bootstrap:
   Ознакомьтесь с документацией своей версии Bootstrap, чтобы убедиться, что все классы и структуры используются корректно. Для Bootstrap 4 вы можете обратиться к официальной документации.

5. Отладка через инструменты разработчика:
   Используйте инструменты разработчика в вашем браузере (обычно нажатием F12), чтобы анализировать CSS-стили, влияющие на переключатель. Это поможет вам увидеть, какие стили применяются и откуда они могут приходить.

Заключение

Таким образом, проблема с отображением переключателя в настольном режиме может быть решена с помощью исправления классов Bootstrap, добавления соответствующих медиа-запросов и проверки настроек вашего WordPress-темы. Оставайтесь внимательны к деталям, и ваше меню будет работать так, как задумано. Если у вас возникли дополнительные вопросы, не стесняйтесь обратиться за консультацией.