How to use two navbar-right classes on the same page?

Question

I’m creating a layout for an ASP system that works with the concept of content where I need to use two navigation bars, one underneath the other. It would be 'Main Menu and Menu 2.

The point is that I need to use the class="navbar-right" on both, so that I generate the sandwich icon and list the menu items on mobile, but when I trigger the menu2 icon it opens the main menu list.

If I remove the Main Menu the Menu2 works, IE, the two are working perfectly. I think one is conflicting with the other.

It follows code, Main Menu that is on the site.master.aspx

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="menuprincipal">
  <nav class="navbar navbar-default navbar-static-top" style="background-color: #143b78">
    <div class="container">
      <div class="navbar-header" style="background-color: #143b78" ;>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#" style="background-color: #143b78" ;><img src="../img/cliente.png" class="logocliente img-responsive" /></a>
        <div class="title" style="width: 500px; padding-top:4%;padding-left:40%" ;>
            <h5 class="navbar-text">Teste de menu</h5>
        </div>
      </div>

      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="../navbar/" style="color:#fff;">Fale com o </br> </a></li>
          <li><a href="../navbar-fixed-top/" style="color:#fff;">Cronômetro</a></li>
        </ul>
      </div>
    </div>
    <!--/.container -->
  </nav>
</div>

Menu2 code that is on the page that inherits the main menu of the site.master:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="menu2">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Início</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Chapas</a></li>
          <li><a href="#about">Comprovante</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
</div>

Thanks in advance.

Answer 1

You’re wearing the same ID in both navbars. Just exchange these two lines.

data-target="#navbar2"

and change the representative ID

<div id="navbar2" class="navbar-collapse collapse">

Below is an example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="menuprincipal">
  <nav class="navbar navbar-default navbar-static-top" style="background-color: #143b78">
    <div class="container">
      <div class="navbar-header" style="background-color: #143b78" ;>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2" aria-expanded="false" aria-controls="navbar">
            <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="#" style="background-color: #143b78" ;><img src="../img/cliente.png" class="logocliente img-responsive" /></a>
        <div class="title" style="width: 500px; padding-top:4%;padding-left:40%" ;>
            <h5 class="navbar-text">Teste menu</h5>
        </div>
      </div>

      <div id="navbar2" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="../navbar/" style="color:#fff;">Fale com o </br> </a></li>
          <li><a href="../navbar-fixed-top/" style="color:#fff;">Cronômetro</a></li>
        </ul>
      </div>
    </div>
    <!--/.container -->
  </nav>
</div>
<div class="menu2">
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Início</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Chapas</a></li>
            <li><a href="#about">Comprovante</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</div>