帶中心徽標的兩部分引導菜單導航菜單

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