Мобильное меню Bootstrap в Wordpress открывается по умолчанию и не закрывается

Я интегрирую панель навигации Bootstrap в свой шаблон Wordpress, используя Bootstrap navwalker

Меню работает на рабочем столе, но когда я изменяю размер браузера в мобильном представлении, мобильное меню открывается по умолчанию, и нажатие на значок баров ничего не делает.

У меня ничего нет в моем app.js это мешает навигационной панели.

РЕДАКТИРОВАТЬ Я только что заметил, что родительский div <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> из ul меню отсутствует в выводе HTML.

<nav class="navbar navbar-default">
    <div class="container" id="main-menu">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BRAND</a>
        </div>
        <?php
        wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 4,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav navbar-left',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
        ); ?>
    </div>
</nav>

HTML-вывод меню выглядит следующим образом, родительский div из ul пропал, отсутствует

<nav class="navbar navbar-default">
    <div class="container" id="main-menu">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BRAND</a>
        </div>
        <ul id="menu-main" class="nav navbar-nav navbar-left">
             <li class="active menu- active"><a href="http://localhost/technia/"><i class="fa fa-home"></i></a></li>

             <li class="menu-science dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Science <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                         <li class="menu-tech"><a title="Tech" href="http://localhost/technia/category/tech/">Tech</a></li>
                  </ul>
             </li>

             <li class="menu-vr"><a title="VR" href="http://localhost/technia/category/vr/">VR</a></li>

             <li class="menu-physics"><a title="Physics" href="http://localhost/technia/category/physics/">Physics</a></li>

             <li class="menu-medicine"><a title="Medicine" href="http://localhost/technia/category/medicine/">Medicine</a></li>

        </ul>       
   </div>
</nav>

1 ответ

Решение

Я решил это, добавив недостающий div вручную

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <?php
            wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                    'walker'            => new WP_Bootstrap_Navwalker())
            ); ?>
</div>
Другие вопросы по тегам