0

我的 bootstrap 4 导航下拉菜单不起作用。我使用来自： https ://github.com/mebishalnapit/bootstrap-navwalker的 navwalker ，我得到了我想要的外观。但是当我在 wordpress 中添加子页面时，下拉菜单不起作用。

这是给我正确的下拉外观的纯 html。（这是我在 wordpress 中实现后想要的 html 标记）

<div id="main_display" class="container-fluid nopadding">
<header>
  <nav id="header" class="navbar fixed-top navbar-expand-lg navbar-dark bg-nav transition">
    <div id="header-container" class="container">

      <a id="brand" class="navbar-brand" href="#"><img src="images/logo_white.png" style="height:70px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Om Corax</a>

                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="nav-link dropdown-item" href="#">subpage</a>
                    <a class="nav-link dropdown-item" href="#">subpage</a>
                    <a class="nav-link dropdown-item" href="#">subpage</a>
                </div>
            </li>

这就是我的菜单在 header.php wordpress 文件中的外观：

<nav id="header" class="navbar fixed-top navbar-expand-lg navbar-dark bg-nav transition">
        <div id="header-container" class="container">
            <a id="brand" class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo_white.png" style="height:90px;"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">

            <?php
            wp_nav_menu( array(
                'theme_location' => 'primary',
                'menu_id'        => 'header',
                'container'      => false,
                'depth'          => 2,
                'menu_class'     => 'navbar-nav',
                'walker'         => new Bootstrap_NavWalker(),
                'fallback_cb'    => 'Bootstrap_NavWalker::fallback',
            ) );
            ?>

猜它在这里我搞砸了，而不是 100% 放在 wp_nav_menu 数组中的内容。谁能帮助我？

4

2 回答 2

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

<button class="navbar-toggler" type="button" 
data-toggle="collapse" 
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" 
aria-expanded="false" 
aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
</button>

<?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'navbarSupportedContent',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
 ?>


</nav>
于 2020-02-29T12:02:57.623 回答
0

如果您在functions.php中正确添加了js文件（通过wp_enqueue_script）但仍然无法正常工作，请尝试删除此div：

<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">

同样的问题

于 2018-07-02T17:19:15.933 回答