两个部分的Bootstrap导航菜单中央有徽标 [英] Two-part Bootstrap navigation menu with logo in the center

问题描述

我使用nav_walker在导航栏中制作动态WordPress链接。如何在wordpress nav_walker中实现像这样的中心内容：

  + ------------- ---------------- + ----------- + --------------------- --------- + 
 + ---------------首页 - 关于--- | -LOGO HERE- | ---联系 - 简介----------- + 
 + ----------------------------- + --- -------- + ------------------------------ + 
  

我该怎么做，或者是什么让我无法提出这个问题。
这是两个nav_walker功能的左侧和右侧导航？我如何将导航栏品牌插入中心？任何人都可以给我结构。

我的代码：

 < nav class = navbar navbar-inverse navbar-fixed-top> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =sr-only>切换导航< / 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> 
  

解决方案

如果您有相同数量的项目在左边和右边。只需创建一个列表，将徽标放在中间并执行 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 =logosrc =http://www.hsdtaxlaw.com/wp-content/uploads/2016/05/logo_placeholder.pngalt =  >< / DIV> 
< / div> 
< div class =half> 
< ul class =left-navlist> 
< li>主页< / li> 
< li>关于< / li> 
< / ul> 
< / div> 
< div class =half> 
< ul class =right-navlist> 
< li>联系人< / li> 
< li>个人资料< / li> 
< li>地图< / 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 =logosrc =http://www.hsdtaxlaw.com/wp-content/uploads/2016/05/logo_placeholder.pngalt =  >< / DIV> 
< / div> 
< div class =half> 
< ul class =left-navlist> 
 <？ 
 $ menu = wp_get_nav_menu_items（'left-primary'）; 
 foreach（$ menu作为$ 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作为$ menu_item）{
 $ title = $ menu_item-> title; 
 $ link = $ menu_item-> url; 
？> 
< li href =<？= $ link？>><？= $ title？>< / li> 
 <？ 
？ 
？> 
< / ul> 
< / div> 
< / div> 
  

I am making a dynamic wordpress links in navigation bar using nav_walker. How can i implement center something like this in wordpress nav_walker:

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

How can i do that or something provide me jsfiddle to come up with that please. Is it two nav_walker function for left and right navigation? how can i insert the navbar brand in center? can anyone give me structure. thanks.

my code:

<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>

解决方案

It can by suprisingly simple if you have same amount of items on left and on right. Just create a list, put the logo in the middle and do text-align: center. See here: https://jsfiddle.net/DTcHh/26132/

The trouble starts when the left and right are even slightly uneven. I suggest creating two lists, each for half of the screen. They will be aligned towards the center and leave a space in the center for the logo.

Check it out here: 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;
}

As for how to implement this with wordpress, I believe you will have to get rid of the navwalker plugin. Just create two menus in wordpress: left-primary and right-primary. Then just iterate them with wp_get_nav_menu_items('left-primary') and build the menu as I suggested. Here is the php code without the nav-walker:

<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>

这篇关于两个部分的Bootstrap导航菜单中央有徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！