2016-05-24 7 views
1

私はワードプレステンプレートでブートストラップを使用しています。ナビゲーションのコンテンツを集中したいと思います。私は標準のブートストラップナビを使用しています。Bootstrap + WordPress nav:リンクとブランドの両方をセンター

私はリンクのセンタリングに成功しましたが、ブランドは絶対に拒否します。私はブランドをリンクリストの外にとどめて、携帯電話で見えるようにしておきたい。

私はすでにブートストラップナビをセンタリングすることに関してたくさんの質問があることを知っていますが、ブランドと通常のリンクの両方に対処するものはありません。時間の経過とともに、テキストブランドはイメージに置き換えられます。誰も私の両方を中心にする方法を私に示すことはできますか?前もって感謝します。

敬具、

ステフ

は、ここでのhtml/phpの

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<!-- Brand and toggle get grouped for better mobile display --> 
    <div class="container"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
<a class="navbar-brand" href="#top">Blue Iguana</a> 
</div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <?php 
    wp_nav_menu(array(
     'theme_location' => 'top_menu', 
     'depth' => 2, 
     'container' => false, 
     'menu_class' => 'nav navbar-nav', 
     'fallback_cb' => 'wp_page_menu', 
     //Process nav menu using our custom nav walker 
     'walker' => new wp_bootstrap_navwalker()) 
    ); 
    ?> 
</div><!-- /.navbar-collapse --> 
だとここで私は自分の答えを見つけたCSS

@media (min-width: 768px) { 
.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
} 

.navbar-brand {}} 

答えて

1

です。この問題を抱えている人には:.navbar-headerの代わりに.navbar-brandの代わりにブランドを使うことができます。幸運のすべて

関連する問題