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

回答

相关问题