Skip to content

Instantly share code, notes, and snippets.

@MuriloEduardo

MuriloEduardo/problema-dois-menus-bootstrap-mesma-pagina

Created February 27, 2016 00:47
Show Gist options
  • Save MuriloEduardo/c3f40465bb3b01ef7df9 to your computer and use it in GitHub Desktop.
Save MuriloEduardo/c3f40465bb3b01ef7df9 to your computer and use it in GitHub Desktop.
Download ZIP
Problema ao ter dois menus responsivos (ou mais) com bootstrap, na mesma página?
Raw
problema-dois-menus-bootstrap-mesma-pagina
<!DOCTYPE html>
<html>
<head>
<title>http://blog.sistemasglobal.com.br</title>
</head>
<body>
<!-- >>> Navegação #1 <<< em uma parte superior da página [por exemplo] -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Esta é o icone que fica geralmente em um dos lados da pagina (left|right)
É neste button que clicamos nos dispositivos mobile -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Estes são os links que são exibidos ao usuário, listados um abaixo do outro
quando o dispositivo é mobile, sabem? -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nossos_site">
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- >>> Navegação #2 <<< em uma outra parte da página -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Esta é o icone que fica geralmente em um dos lados da pagina (left|right)
É neste button que clicamos nos dispositivos mobile -->
<div class="navbar-header page-scroll">
<!-- Esta é o icone que fica geralmente em um dos lados da pagina (left|right)
É neste button que clicamos nos dispositivos mobile -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Estes são os links que são exibidos ao usuário, listados um abaixo do outro
quando o dispositivo é mobile, sabem? -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nossos_site">
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment