Wordpress菜单

Question

我已经将bootstrap Navbar与我正在开发的Wordpress主题集成在一起。然而，我的菜单被挤压在一起，并且ul＆amp; amp;中没有间距或设计。 li标签。我已经尝试了一切可能使用bootstrap正常工作，但我迷路了。

有人能指出我正确的方向来解决这个问题或者可能给我一个解决方案吗？谢谢你的帮助。

直播网站：https://publifiedlabs.com/sandbox-theme/

这是我的代码块

           <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="<?php echo home_url( '/' ); ?>">
                    <img src="https://publifiedlabs.com/wp-content/uploads/2016/04/main-logo.png" alt="<?php //get alt tag for image ?>">
                    </a>
                </div> <!-- ./navbar-header -->
                    <div class="search-form-container">
                    <?php get_search_form(); ?>
                </div>
                <!-- Begin wp_nav_menu -->
                        <div class="navbar navbar-nav float-md-right" id="navbarSupportedContent">
                        <?php   // This brings in the menu in the proper style with bootstrap
                                    wp_nav_menu( array(
                                        'theme_location'    =>'primary',
                                        //'depth'             => 2,
                                        'container'         => '',
                                        'fallback_cb'       => '',
                                        //'menu_class'        => 'navbar-nav mr-auto',
                                        'items_wrap'        => '<ul class="navbar-nav">%3$s</ul>',
                                        'walker'            => new pbf_walker_nav_primary(),
                                        'echo'              => true
                                        ) 
                                    ); ?>
            </div> <!-- /.container-fluid -->
        </nav>

以下是输入的HTML：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="https://publifiedlabs.com/sandbox-theme/">
                            <img src="https://publifiedlabs.com/wp-content/uploads/2016/04/main-logo.png" alt="">
                            </a>
                        </div> <!-- ./navbar-header -->
                            <div class="search-form-container">
                            <form role="search" method="get" action="https://publifiedlabs.com/sandbox-theme/">
    <input type="search" class="form-control" placeholder="Search" value="" name="s" title="Search">
</form>                        </div>
                        <!-- Begin wp_nav_menu -->
                                <div class="navbar navbar-nav float-md-right" id="navbarSupportedContent">
                                    <ul class="navbar-nav"><li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item active menu-item-16 nav-item"><a href="https://publifiedlabs.com/sandbox-theme/">Home</a></li>
    <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-15 nav-item"><a href="https://publifiedlabs.com/sandbox-theme/about-us/" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
    <ul class="dropdown-menu depth_0 nav navbar-nav">
        <li id="menu-item-35" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-35 nav-item"><a href="#">Contact</a></li>
    </ul>
    </li>
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 nav-item"><a href="https://publifiedlabs.com/sandbox-theme/blog/">Blog</a></li>
    </ul>                    </div> <!-- /.container-fluid -->
                    </div></nav>

菜单问题图片：

Answer 1

在您的第一个代码示例中，从此

中删除navbar-expand-lg

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

Answer 2

以下是这篇文章中问题的答案。

我所做的只是在我的functions.php文件中添加下面的代码。

// This controls the <a></a> class
function add_menuclass($ulclass) {
    return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
 }
 add_filter('wp_nav_menu','add_menuclass');

参考链接：How to add class to link in wp_nav_menu?