Como usar duas classes navbar-right na mesma página?

[Camilla Fonseca Setuba 0]

Olá pessoal!

Estou criando um layout para um sistema em ASP que trabalha com o conceito de content onde preciso usar duas barras de navegação uma embaixo da outra, seria 'Menu principal e Menu 2.

A questão é que preciso usar a classe="navbar-right" nos dois, para que gere o ícone do sanduíche e liste os itens do menu no mobile, mas quando aciono o ícone do  menu2 ele abre a lista do menu principal.

Se eu remover o Menu Principal o Menu2 funciona, ou seja, os dois estão funcionando perfeitamente. Acho que um esta conflitando com o outro.

 

Segue código, Menu Principal que fica no site.master.aspx

 

<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"></div></h5>
        </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><!--/.nav-collapse -->
      </div>
    </nav>
</div>

 

Código menu2 que fica na página que herda o menu principal do site.master:

 

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

 

Desde já agradeço.

[leandrodsi 0]

Boa tarde Camila,

pelo que vi aqui você declarou os dois menus com o id "navbar", o que acaba conflitando.

Não deve-se usar id's iguais em uma mesma página, nesse caso no segundo menu você pode colocar o id como "navbar2" e no target do botão collapsed dele colocar o mesmo.

Segue abaixo como deve ficar seu código.

Botão 1

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

Botão 2

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

Menu 1

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

Menu 2

<div id="navbar2" 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>

Espero ter ajudado. :-D

[Camilla Fonseca Setuba 0]

Olá Leandrodsi, ajudou sim. Muito obrigada!!