带中心徽标的两部分引导菜单导航菜单

Question

我正在导航栏中使用nav_walker制作一个动态的WordPress链接。我如何能实现中心这样的事情在WordPress nav_walker：

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

我怎样才能做到这一点或某事提供我来的jsfiddle了那请。 它是两个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> 

Answer 2

好的尝试使用下面的标记来实现你在找什么，你还需要调整一点点CSS的覆盖引导的默认样式。

HTML

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <a class="navbar-brand">Your logo</a> 
     <li><a href="../navbar/">Contact</a></li> 
     <li><a href="../navbar/">Profile</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

的CSS它实现你想要的（确保这将覆盖缺省引导样式）什么

.navbar-nav { 
    float: none; 
    margin: auto; 
    max-width: 40%; //adjust to your requirements 
} 

Codepen here

Answer 3

前一段时间我寻找完全相同的东西，并遇到这支笔。 道具到Bryan Willis

Bootstrap 3 Headers看最后一个例子！

HTML

<div class="container"> 
<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar9"> 
     <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="brand-centered"> 
    <a class="navbar-brand" href="http://disputebills.com"><img style="margin-right: 10px; padding: 0;" src="http://res.cloudinary.com/disputebills/image/upload/v1462474206/blue-mark_cnzgry.png" alt="Dispute Bills">Dispute Bills 
    </a> 
    </div> 

    <div id="navbar9" class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
    </ul> 
    </div> 
    <!--/.nav-collapse --> 
</div> 
<!--/.container-fluid --> 

CSS

.navbar-brand { 
    padding: 0px; 
} 
.navbar-brand>img { 
    height: 100%; 
    padding: 15px; 
    width: auto; 
} 
/* EXAMPLE 9 - Center with Flexbox and Text*/ 
.brand-centered { 
    display: flex; 
    justify-content: center; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
} 
.brand-centered .navbar-brand { 
    display: flex; 
    align-items: center; 
}