如何在Bootstrap 4 WordPress中用Navwalker实现品牌居中双主导航

Hey Nick, sorry you're stuck with this nav issue—let's break it down and get those dual menus working properly, both on desktop (centered brand, menus on sides) and mobile (both menus in one collapse dropdown).

First, Let's Check the Core Issues #

Most likely, the problem stems from either:

• Incorrect Bootstrap navbar HTML structure (missing required classes or wrong nesting for the second menu)
• WordPress menu registration/call errors (the second menu isn't being loaded correctly)

Step 1: Register Both Menus in functions.php #

Make sure you've registered two distinct menus in your theme's functions file—this is the foundation for calling them separately:

function your_theme_register_menus() {
  register_nav_menus( array(
    'primary_left'   => __( 'Primary Left Menu', 'your-theme-slug' ),
    'primary_right'  => __( 'Primary Right Menu', 'your-theme-slug' ),
  ) );
}
add_action( 'init', 'your_theme_register_menus' );

Don't forget to replace your-theme-slug with your actual theme slug, and assign menus to these locations in WP Admin > Appearance > Menus.

Step 2: Correct Navbar HTML Structure in header.php #

The key here is wrapping both menus inside the same navbar-collapse container so they collapse together, and using Bootstrap's flex utilities to position them on desktop. Here's a working structure:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- Centered Brand Image -->
  <a class="navbar-brand mx-auto" href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <img src="<?php echo get_template_directory_uri(); ?>/path-to-your-brand-image.png" alt="Brand Logo">
  </a>

  <!-- Collapse Toggle Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Collapse Container (Holds Both Menus) -->
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <!-- Left Menu -->
    <ul class="navbar-nav mr-auto">
      <?php
        wp_nav_menu( array(
          'theme_location' => 'primary_left',
          'container'      => false,
          'items_wrap'     => '%3$s', // Uses the existing ul instead of adding a new container
          'depth'          => 1, // Adjust if you need dropdowns
        ) );
      ?>
    </ul>

    <!-- Right Menu -->
    <ul class="navbar-nav ml-auto">
      <?php
        wp_nav_menu( array(
          'theme_location' => 'primary_right',
          'container'      => false,
          'items_wrap'     => '%3$s',
          'depth'          => 1,
        ) );
      ?>
    </ul>
  </div>
</nav>

Important Notes on This Structure: #

• The navbar-brand uses mx-auto to center it on desktop (Bootstrap 4's auto margin utility).
• Both menus are inside the same #navbarCollapse container, so the toggler will show/hide both together on mobile.
• The mr-auto on the left menu pushes it to the left, and ml-auto on the right menu pushes it to the right—this creates the split layout around the centered brand.
• The items_wrap => '%3$s' parameter tells WordPress to only output the menu items (li elements) instead of wrapping them in a new ul, since we already have our ul with the correct Bootstrap classes.

Step 3: Fix CSS for Desktop Layout (If Needed) #

If the centered brand isn't behaving as expected, add this custom CSS to make sure the navbar is a flex container with proper spacing:

.navbar {
  position: relative;
}

.navbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Adjust padding on left/right menus to make space for centered brand */
@media (min-width: 992px) {
  .navbar-nav:first-child {
    margin-right: auto;
    padding-right: 150px; /* Match to half your brand image width */
  }
  .navbar-nav:last-child {
    margin-left: auto;
    padding-left: 150px; /* Match to half your brand image width */
  }
}

This absolute positioning trick ensures the brand stays perfectly centered even as the menus change length. Adjust the padding values to match your logo's width.

Step 4: Troubleshooting the "Second Menu Not Showing" Issue #

If the right menu still doesn't appear, check these:

1. Menu Assignment: Go to WP Admin > Appearance > Menus and confirm you've assigned a menu to the "Primary Right Menu" location.
2. Theme Location Name: Double-check that the theme_location parameter in wp_nav_menu() matches exactly what you registered in functions.php (case-sensitive!).
3. Empty Menu: Make sure the right menu has at least one item added—WordPress won't output anything if the menu is empty.
4. Bootstrap JS/CSS Loading: Ensure you're loading Bootstrap 4's CSS and JS (including jQuery, since Bootstrap 4 depends on it) correctly in your theme. Missing JS will break the collapse toggle, and missing CSS will mess up layout.

That should get your dual-menu setup working both on desktop and mobile. Let me know if you hit any snags with specific code snippets!

内容的提问来源于stack exchange，提问作者Nick