Have two menus and when minimizing stay only 1 containing both

Question

Have two menus and when minimizing stay only 1 containing both

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

How can I have two menus on my site, but when I minimize that menu icon (three risquinhos) with the two menus included?

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><scriptsrc="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>

In the code they have the two menus and when it miniminiza the screen it appears the risquiho, would like that according to the resolution of the screen appeared only 1 time nav menu with the items of menu 1 and menu 2.

twitter-bootstrap

asked by anonymous 22.02.2016 / 21:09

2 answers

Divide value in foreach [closed] How to receive the selected item from a combo box and use on another select?

score 1 · Answer 1

The navbar class does this, when the screen is small it shows the menu one way and when it is large another. The three guys you mentioned are right in the first example of navbar in the bootstrap documentation on components / navbar.

It does not make sense to have these two navbars.

It makes sense to have a navbar and another menu and display only one of the two using the bootstrap responsiveness features, for example the visible-xs-block class to only display something if the screen is extra small. But that's just in case you're not satisfied with one of navbar's views and it's better to do something other than change the style.

Navbar Documentation

score 0 · Answer 2

I agree with everything Sergio said .. but in case you want to continue with this layout .. this implies "duplicate code"

<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><scriptsrc="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>