html - 中央にロゴがある 2 部構成の Bootstrap ナビゲーションメニュー

Question

nav_walker を使用して、ナビゲーションバーに動的なワードプレスリンクを作成しています。wordpress nav_walkerで次のようなセンターを実装するにはどうすればよいですか:

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

どうすればそれを行うことができますか、それを思い付くためにjsfiddleを提供してください。左右のナビゲーション用の2つのnav_walker機能ですか？navbar ブランドを中央に挿入するにはどうすればよいですか? 誰か構造を教えてください。ありがとう。

私のコード:

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

score 5 · Accepted Answer

左右に同じ数のアイテムがあれば、驚くほど簡単にできます。リストを作成し、ロゴを真ん中に置いてtext-align: center. こちらをご覧ください: https://jsfiddle.net/DTcHh/26132/

左右が少しでもズレるとトラブルが起きます。画面の半分ごとに 2 つのリストを作成することをお勧めします。それらは中央に向かって整列され、中央にロゴ用のスペースが残されます。

ここでチェックしてください：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;
}

これをワードプレスで実装する方法については、navwalker プラグインを削除する必要があると思います。wordpress で 2 つのメニューを作成するだけです: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>

score 0 · Accepted Answer

少し前にまったく同じものを探していて、このペンに出会いました。ブライアン・ウィリスの小道具

ブートストラップ 3 ヘッダー最後の例を見てください。

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

score 0 · Accepted Answer

探しているものを実現するために以下のマークアップを使用してみてください。また、ブートストラップのデフォルトスタイルをオーバーライドするために 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
}

コードペンはこちら

html - 中央にロゴがある 2 部構成の Bootstrap ナビゲーション メニュー

3 に答える 3

Related

Reference

html - 中央にロゴがある 2 部構成の Bootstrap ナビゲーションメニュー