1

Tem como eu ter dois menus no meu site, mas quando eu minimizar aparecer aquele icone de menu(três risquinhos) com os dois menus inclusos?

ex:

<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>

        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
      </ul>

    </div>
  </div>
</nav>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

No codigo eles possui os dois menus e quando miniminiza a tela ele aparece o risquiho, gostaria que conforme a resolução da tela aparecesse apena 1 vez menu nav com os itens do menu 1 e menu 2.

1
  • em termos de estetica nao sei o motivo de quereres ter dois menus. Mas o Sérgio já deu uma possivel soluçao. duplicas o menu que queres para a o menu principal mas com o atributo visible-xs e no outro que queres esconder poes hidden-xs
    – sir_ask
    Commented 18/01/2017 às 16:01

2 Respostas 2

2

A classe navbar faz isso, quando a tela esta pequena ela mostra o menu de um jeito e quando esta grande de outro. O três riquinhos que você falou estão bem no primeiro exemplo de navbar na documentação do bootstrap em components/navbar.

Não faz sentido ter essas duas navbars.

Faz sentido ter uma navbar e um outro menu e exibir somente um dos dois utilizando os recursos de responsividade do bootstrap, por exemplo a classe visible-xs-block para so exibir alguma coisa se a tela for extra small. Mas isso só no caso de você não estar satisfeito com uma das visualizações da navbar e for melhor fazer outro do que alterar o estilo.

Documentação Navbar

0

Concordo com tudo o que o sérgio disse.. mas no caso de quereres seguir com esse layout.. isto implica "código duplicado"

<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>

        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>

      </ul>

      <ul class="nav navbar-nav visible-xs">
      <hr /> 
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
      </ul>

    </div>
  </div>
</nav>


<nav class="navbar navbar-inverse hidden-xs">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .