Bootstrap導航欄無法正常工作與wordpress

我正在使用Bootstrap的WordPress自定義主題4.我檢查了所有的連接，即引導CSS和js連接。另一個引導代碼，如果我將它添加到主題工作正常。Bootstrap導航欄無法正常工作與wordpress

問題出在導航。導航無法正確顯示。如果你看看上面的圖像，它顯示的導航不是正確的設計。

我使用的是給出

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

來源

2017-12-27 ziaullahzia

引導'摺疊崩潰'， 'menu_class'=>'nav navbar-nav navbar-right'，你必須使用bootstrap中可用的類。 – maulik

嗨maulik，我使用可用的類nav navbar-nav。這不會工作？ – ziaullahzia

如果使用的是引導4，改變你的代碼，該代碼：帶班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>

來源

2017-12-27 16:21:32

它顯示移動菜單，而不是正常導航 – ziaullahzia

您的代碼在引導程序3中工作，您必須將其更改爲引導程序4導航。 –

Bootstrap導航欄無法正常工作與wordpress

回答

相關問題