2017-12-27 27 views
1

私はBootstrap 4を使用してWordPressカスタムテーマで作業しています。すべての接続、つまりブートストラップCSSとjsが接続されていることを確認しました。テーマに追加すると別のブートストラップコードがうまくいきます。ブートストラップnavbarがワードプレスで正しく動作していない

ナビゲーションはenter image description hereです。ナビゲーションが正しく表示されません。 上記の画像を見ると、正しいデザインではないことが示されています。

あなたがあなたのコードを変更するブートストラップ4、使用している場合は、私が使用していたコードが

<header class="site-header" role="banner"> 
     <div class="navbar-wrapper"> 
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
       <div class="container"> 
        <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> 
         <?php if (get_theme_mod('theme_wordpress_logo')): ?> 
         <a href="<?php echo esc_url(home_url('/')); ?>"> 
          <img src="<?php echo esc_attr(get_theme_mod('theme_wordpress_logo')); ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>"> 
         </a> 
        <?php else : ?> 
         <a class="site-title" href="<?php echo esc_url(home_url('/')); ?>"><?php esc_url(bloginfo('name')); ?></a> 
        <?php endif; ?> 
        </div> <!-- navbar-header --> 

        <div class="navbar-collapse collapse"> 
        <?php 
         wp_nav_menu(array(
          'theme_location' => 'primary', 
          'container'  => 'nav', 
          'container_class' => 'navbar-collapse collapse', 
          'menu_class'  => 'nav navbar-nav navbar-right', 
          'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
          'walker'   => new wp_bootstrap_navwalker() 
         )); 
        ?> 
        </div><!-- navbar-collapse --> 
       </div> 
      </div> 
     </div><!-- navbar-wrapper --> 
    </header><!-- Header --> 
+0

ブートストラップを'collapse collapse'、 'menu_class' => 'nav navbar-nav navbar-right'は、ブートストラップで利用可能なクラスを使用する必要があります。 – maulik

+0

こんにちはmaulik、私は使用可能なクラスnav nav-navを使用しています。これは動作しませんか? – ziaullahzia

答えて

2

与えられる:クラスcontainer_class' =>「ナビゲーションバーのこのリストで今

<nav class="navbar navbar-topbar navbar-expand-xl navbar-dark bg-primary"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar"> 
     &#9776; 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="collapsingNavbar"> 
     <a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a> 
     <?php 
      wp_nav_menu(array(
      'theme_location' => 'primary', 
      'container'  => false, 
      'menu_class'  => 'nav navbar-nav', 
      'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
      'items_wrap'  => '<ul id="%1$s" class="%2$s">%3$s</ul>', 
      'depth'   => 2, 
      'walker'   => new wp_bootstrap_navwalker() 
     )); 
     ?> 
     <?php get_template_part('navbar-search'); ?> 
    </div> 
    </nav> 
+0

通常のナビゲーションではなくモバイルメニューを表示しています – ziaullahzia

+0

コードはブートストラップ3で動作しています。ブートストラップ4のナビゲーションに変更する必要があります。 –

関連する問題