两部分的引导导航菜单，中间带有徽标

Question

我正在使用nav_walker在导航栏中创建动态wordpress链接。我如何在wordpress nav_walker中实现这样的中心：

+-----------------------------+-----------+------------------------------+
+---------------HOME--ABOUT---|-LOGO HERE-|---CONTACT--PROFILE-----------+
+-----------------------------+-----------+------------------------------+

我该怎么办或有什么需要我给我提的。左右导航是否有两个nav_walker函数？如何在中心插入导航栏品牌？谁能给我结构。谢谢。

我的代码：

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <div class="navbar-brand navbar-center">

    </div>

    <?php wp_nav_menu(array(
        'menu'           => 'primary-1',
        'theme_location' => 'primary-1',
        'depth'          => 2,
        'container'      => 'div',
        'container_class'   => 'collapse navbar-collapse navbar-center',
        'container_id'      => 'bs-example-navbar-collapse-1',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker()
        )); 
    ?>
</nav>

Answer 1

如果左侧和右侧的项目数量相同，它可能会非常简单。只需创建一个列表，将徽标放在中间，然后执行即可text-align: center。看到这里：https : //jsfiddle.net/DTcHh/26132/

当左右两边甚至略微不平时，麻烦就开始了。我建议创建两个列表，每个列表占整个屏幕的一半。它们将朝向中心对齐，并在中心保留徽标的空间。

在这里查看：https : //jsfiddle.net/DTcHh/26133/

的HTML：

<div class="navbar navbar-default">
    <div class="logo-wrapper">
        <div class="logo"><img class="logo" src="http://www.hsdtaxlaw.com/wp-content/uploads/2016/05/logo_placeholder.png" alt=""></div>
    </div>
    <div class="half">      
        <ul class="left-navlist">
            <li>Home</li>
            <li>About</li>
        </ul>
    </div>
    <div class="half">      
        <ul class="right-navlist">
            <li>Contact</li>
            <li>Profile</li>
            <li>Maps</li>
        </ul>
    </div>
</div>

CSS：

.logo-wrapper {
    text-align: center;
    margin-bottom: -37px;
}

.logo {
    width: 100px;
    display: inline-block;
}

.navbar li {
    display: inline-block;
    padding: 0 10px 10px;
}

.half {
    width: 50%;
    display: block;
    float: left;
}

.right-navlist {
    padding-left: 60px;
}

.left-navlist {
    text-align: right;
    padding-right: 60px;
}

至于如何使用wordpress来实现这一点，我相信您将不得不摆脱navwalker插件。只需在wordpress中创建两个菜单：left-primary和right-primary。然后，wp_get_nav_menu_items('left-primary')按照我的建议对其进行迭代并构建菜单。这是没有nav-walker的php代码：

<div class="navbar navbar-default">
    <div class="logo-wrapper">
        <div class="logo"><img class="logo" src="http://www.hsdtaxlaw.com/wp-content/uploads/2016/05/logo_placeholder.png" alt=""></div>
    </div>
    <div class="half">      
        <ul class="left-navlist">
            <?
                $menu = wp_get_nav_menu_items('left-primary');
                foreach ($menu as $menu_item) {
                    $title = $menu_item->title;
                    $link = $menu_item->url;
                    ?>
                        <li href="<?=$link?>"><?=$title?></li>
                    <?
                ?
            ?>
        </ul>
    </div>
    <div class="half">      
        <ul class="right-navlist">
            <?
                $menu = wp_get_nav_menu_items('right-primary');
                foreach ($menu as $menu_item) {
                    $title = $menu_item->title;
                    $link = $menu_item->url;
                    ?>
                        <li href="<?=$link?>"><?=$title?></li>
                    <?
                ?
            ?>
        </ul>
    </div>
</div>