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

Navigation
0

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

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

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

Follow the 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><linkhref="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><divclass="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>

Code menu2 that sits on the page that inherits the main menu from site.master: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="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><divclass="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>

Thank you in advance.

    
asked by anonymous 27.01.2018 / 13:19

1 answer

0

You are using the same ID in the two navbars. Just swap these two lines. 

data-target="#navbar2"

and change the relevant 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><scriptsrc="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>
    
27.01.2018 / 14:15
Error of routes in php Insert in table - strange value