Bootstrap navbar funktioniert nicht richtig mit Wordpress

Question

Ich arbeite an WordPress benutzerdefinierte Thema mit Bootstrap 4.Iche überprüft alle Verbindung, d. H. Bootstrap CSS und js ist verbunden. Ein anderer Bootstrap-Code, wenn ich ihn zum Thema hinzufüge, funktioniert einwandfrei.

Das Problem ist mit Navigation . Die Navigation wird nicht korrekt angezeigt. Wenn Sie auf das obige Bild schauen, wird die Navigation nicht richtig angezeigt.

Der Code, der mir gegeben wird unter Verwendung

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

Answer 1

Wenn Sie 4 Bootstrap verwenden, um Ihren Code zu ändern:

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