Have two menus and when minimize get only 1 containing both

Asked

Viewed 501 times

1

It’s like I have two menus on my site, but when I minimize appear that icon menu (three stripes) 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>
  <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>

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

twitter-bootstrap

  • In terms of aesthetics I don’t know why you want to have two menus. But Sergio already gave a possible solution. duplicate the menu you want for the main menu but with the Visible-Xs attribute and the other you want to hide for Hidden-Xs

2 answers

2

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

No sense having those 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 just in case you’re not satisfied with one of the navbar views and it’s better to do another than change the style.

Documentation Navbar

0

I agree with everything Sérgio said.. but in case you want to go with that 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>
  <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>

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.