Bootstrap 4 мобильное меню не работает для разработки WordPress

Содержание

Вопрос или проблема
Ответ или решение
Проблема с мобильным меню Bootstrap 4 в разработке WordPress
1. Структура HTML
2. Ошибки в коде и их устранение
3. Проверка CSS и JavaScript
4. Тестирование
Заключение

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

У меня есть собственная тема Bootstrap 4, которую я разрабатываю в WordPress. Выпадающее мобильное меню не работает, когда нажимается меню гамбургера на меньших экранах. Я не уверен, нужно ли мне что-то добавить в файл functions.php для мобильного меню или какой-то другой PHP/WordPress код для сворачивающейся навигации?

Мобильное меню будет работать, если я раскомментирую раздел “collapse navbar-collapse”, но тогда появляются два меню. Это говорит мне о том, что все скрипты и CSS работают. Тем не менее, я не уверен, что я упускаю, не могу понять, что не так. Я не использую скрипт navwalker. Я был бы очень признателен за любую помощь!

HTML код

<header>
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

    <img class="ml-2 NVAlogo" src="https://wordpress.stackexchange.com/questions/332457/<?php bloginfo("stylesheet_directory'); ?>/img/NVAlogo.png" alt="логотип"><a class="navbar-brand" href="front.html">Nuvision Alliance</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Переключить навигацию">
      <span class="navbar-toggler-icon"></span>
    </button>

 <?php

     wp_nav_menu( array(

        'menu'    =>      'primary',

        'container'         =>      'nav',

        'container_class'   =>      'navbar-collapse collapse',

        'menu_class'        =>      'nav navbar-nav navbar-right'

     ));

  ?>



  <div class="collapse navbar-collapse" id="navbarCollapse">
   <ul class="navbar-nav mr-auto">

       <!-- <li class="nav-item">
          <a class="nav-link" href="mission.html">Миссия</a>
        </li>
          <li class="nav-item">
          <a class="nav-link" href="causes.html">Причины</a>
        </li>
           <li class="nav-item">
          <a class="nav-link" href="index.html">Блог</a>
        </li>

          <li class="nav-item">
          <a class="nav-link" href="contact.html">Контакт</a>
        </li>

      </ul>-->

    </div>
  </nav>
</header>

У вас нет идентификатора в вашем вызове wp_nav_menu. Добавьте 'container_id' => 'navbarCollapse', в массив, который вы передаете. И удалите HTML ниже с закомментированным кодом.

У меня была похожая проблема – убедитесь, что jquery.js присутствует и ссылка работает на странице.

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

Проблема с мобильным меню Bootstrap 4 в разработке WordPress

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

1. Структура HTML

Вы предоставили следующий фрагмент HTML для навигационной панели:

<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <img class="ml-2 NVAlogo" src="https://wordpress.stackexchange.com/questions/332457/<?php bloginfo("stylesheet_directory"); ?>/img/NVAlogo.png" alt="logo">
        <a class="navbar-brand" href="front.html">Nuvision Alliance</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <?php
        wp_nav_menu( array(
            'menu' => 'primary',
            'container' => 'nav',
            'container_class' => 'navbar-collapse collapse',
            'menu_class' => 'nav navbar-nav navbar-right'
        ));
        ?>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
                <!-- Пример элементов меню -->
            </ul>
        </div>
    </nav>
</header>

2. Ошибки в коде и их устранение

ID для контейнера меню: В вашем вызове wp_nav_menu() не хватает идентификатора контейнера. Вам необходимо добавить 'container_id' => 'navbarCollapse', в массив параметров. Это связывает ваше мобильное меню с кнопкой-гамбургером.
```
wp_nav_menu( array(
    'menu' => 'primary',
    'container' => 'div',
    'container_id' => 'navbarCollapse',
    'container_class' => 'collapse navbar-collapse',
    'menu_class' => 'navbar-nav mr-auto'
));
```
Удаление лишнего HTML: Вам нужно убрать повторяющийся блок <div class="collapse navbar-collapse" id="navbarCollapse">. Это может привести к конфликтам в отображении, если вы используете одно и то же ID для двух элементов.
Проверка загрузки jQuery: Убедитесь, что jQuery загружается на сайте. В большинстве случаев WordPress автоматически включает jQuery, однако в вашей теме он может быть отключен.

Для добавления jQuery в theme functions.php можно использовать следующий код:
```
function my_theme_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
```

3. Проверка CSS и JavaScript

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

4. Тестирование

После внесения изменений проверьте работоспособность мобильного меню на различных устройствах и разрешениях экрана. Лучше всего использовать инструменты разработчика в браузере (например, Chrome DevTools), чтобы протестировать адаптивность.

Заключение

Соблюдение описанных выше рекомендаций должно помочь вам решить проблему с мобильным меню в вашей теме WordPress. Надеюсь, данная информация будет полезной для вас. Если возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью!