Bootstrap 4移动菜单不适用于WordPress开发

时间:2019-03-23 作者:Jedi mindTricker

我有一个自定义的bootstrap 4主题,我正在wordpress中构建。在较小的视口中按汉堡菜单时,下拉移动菜单不起作用。我不确定是否需要向函数添加内容。用于移动菜单的php文件,或用于可折叠nav的其他php/wp代码?

当我取消注释“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="<?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">

       <!-- <li class="nav-item">
          <a class="nav-link" href="mission.html">Mission</a>
        </li>
          <li class="nav-item">
          <a class="nav-link" href="causes.html">Causes</a>
        </li>
           <li class="nav-item">
          <a class="nav-link" href="index.html">Blog</a>
        </li>

          <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>

      </ul>-->

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

1 个回复
SO网友:mrben522

您在wp\\U nav\\U菜单呼叫中没有ID。添加\'container_id\' => \'navbarCollapse\', 到您要传入的阵列。并删除下面包含所有注释掉的代码的HTML。

相关推荐

如何创建4列和2列Twitter-Bootstrap相结合的WordPress循环?

我想根据4列(桌面视图)、2列(mobile view 768px)和1列(mobile view 425px)的组合显示帖子。我在下面找到了很棒的代码:<?php $paged = ( get_query_var(\'paged\') ) ? get_query_var(\'paged\') : 1; $args=array( \'post_type\' => \'post\',