Two different bootstrap menu collapse on same button

Question

I have a Wordpress site with Bootstrap 3.2 and I'm trying to make 2 different menus to collapse in the same bootstrap button is this posible? How? Actually it has the two menus that collapse in different buttons (Top one is not working and don't know why) but I want them to collapse in the same.

<header id="main_header" role="banner">
<div class="container">
    <h1 id="logo"><a title="<?php bloginfo('name'); ?>" href="<?php echo home_url(); ?>"></a></h1>

    <div id="topbar" class="row">
        <nav class="navbar navbar-default navbar-right col-md-12 " role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="<?php echo home_url(); ?>">                        
                    </a>
                </div>

                <?php
                wp_nav_menu(array(
                    'menu' => 'primary',
                    'theme_location' => 'primary',
                    'depth' => 2,
                    'container' => 'div',
                    'container_class' => 'collapse navbar-collapse navbar-right',
                    'container_id' => 'topbar',
                    'menu_class' => 'nav navbar-nav',
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );
                ?>
            </div>
        </nav>
    </div>
    <div class="row">
        <div class="col-md-12 nopadding">
            <img id="zapatero" src="<?php bloginfo("template_url"); ?>/img/circulo-logo.png" height="160px" class="img-responsive" />
        </div>
    </div>
    <div id="secondmenu" class="row">
        <nav class="navbar navbar-default navbar-right col-md-pull-3 col-md-8 " role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <?php
                wp_nav_menu(array(
                    'menu' => 'secondary',
                    'theme_location' => 'secondary',
                    'depth' => 2,
                    'container' => 'div',
                    'container_class' => 'collapse navbar-collapse ',
                    'container_id' => 'bs-example-navbar-collapse-2',
                    'menu_class' => 'nav navbar-nav',
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );
                ?>
            </div>
        </nav>
        <div id="search" class="col-md-push-8 col-md-3">
            <?php get_search_form(); ?>
        </div>
    </div>
</div>

Answer 1

hi One of your menu should be like this follow the structure ok

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php echo home_url(); ?>">
                <?php bloginfo('name'); ?>
            </a>
    </div>

        <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</nav>
<!--this is a primary menu -->

and the secondary should be like this

<nav role="navigation" class="navbar navbar-default navbar-static-top">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--<a href="#" class="navbar-brand">Logo</a>-->
                <a class="bgc hdr_hic" title="./" href="./">&nbsp;</a>
            </div>
            <!-- Collection of nav links, forms, and other content for toggling -->
            <div id="navbarCollapse" class="collapse navbar-collapse">
          <?php
                wp_nav_menu( array(
                    'menu'              => 'secondary',
                    'theme_location'    => 'secondary',
                    'depth'             => 2,
                    'container'         => true,
                    'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
            ?>        <!--<form role="search" class="navbar-form navbar-left">
                    <div class="form-group">
                        <!--<input type="text" placeholder="Search" class="form-control">-->

                        <!--<div class="search-toggle">-->
                    <!--<a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container"><?php //_e( 'Search', 'twentyfourteen' ); ?></a>-->
                       <!--</div>-->
                    <!--</div>-->
               <!--</form>-->

            </div>
        </nav>
    <!-- its a secondary menu -->

use this i hope your both menu will work..!

Answer 2

yes, you can do this, just use a class in your data-target attribute and set this class on both navigations.

<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">

<!-- first navigation -->
<nav class="navbar-collapse collapse">...</nav>
<!-- second navigation -->
<nav class="navbar-collapse collapse">...</nav>