Centralizar menu com Bootstrap 3
30/01/2019
0
Bom dia!
Possuo uma navbar no BS3 onde não consigo centralizar verticalmente a lista que compõe o menu.
Já verifiquei margens e padding, line height, vertical-align, align-items com display flex, mas nada da certo. Poderiam me ajudar?
Importante dizer que a altura da nav é dinâmica, não podendo ser setada para responsividade.
Já tentei uma técnica de translate x y também, mas quando fica responsivo para telas pequenas dá uma diferença grande na altura do menu.
Abaixo o código:
<!--Menu da aplicação-->
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class=" navbar-toggle" data-toggle="collapse" data-target="#menu-navegacao">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-left"><img src="imgs/logo.png"></a>
<!--
<a class="navbar-brand" href="#page-top"><img src="imgs/mr batista3.png" alt="logotipo MR Batista"></a>
-->
</div>
<div class="collapse navbar-collapse menu-navegacao flex-align" id="menu-navegacao">
<ul class="nav navbar-nav navbar-right">
<li><a href="#page-top"></a></li>
<li><a href="#servicos" class="">Serviços</a></li>
<li><a href="#equipamentos" class="">Equipamentos</a></li>
<li><a href="#quem_somos" class="">Quem Somos</a></li>
<li><a href="#localizacao" class="">Localização</a></li>
<li><a href="#contato" class="">Contato</a></li>
</ul>
</div>
</div>
</nav>
<!--Fim do menu da aplicação-->
Essa dúvida foi gerada a partir de um comentário no artigo CSS Vertical Align - Dica
Possuo uma navbar no BS3 onde não consigo centralizar verticalmente a lista que compõe o menu.
Já verifiquei margens e padding, line height, vertical-align, align-items com display flex, mas nada da certo. Poderiam me ajudar?
Importante dizer que a altura da nav é dinâmica, não podendo ser setada para responsividade.
Já tentei uma técnica de translate x y também, mas quando fica responsivo para telas pequenas dá uma diferença grande na altura do menu.
Abaixo o código:
<!--Menu da aplicação-->
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class=" navbar-toggle" data-toggle="collapse" data-target="#menu-navegacao">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-left"><img src="imgs/logo.png"></a>
<!--
<a class="navbar-brand" href="#page-top"><img src="imgs/mr batista3.png" alt="logotipo MR Batista"></a>
-->
</div>
<div class="collapse navbar-collapse menu-navegacao flex-align" id="menu-navegacao">
<ul class="nav navbar-nav navbar-right">
<li><a href="#page-top"></a></li>
<li><a href="#servicos" class="">Serviços</a></li>
<li><a href="#equipamentos" class="">Equipamentos</a></li>
<li><a href="#quem_somos" class="">Quem Somos</a></li>
<li><a href="#localizacao" class="">Localização</a></li>
<li><a href="#contato" class="">Contato</a></li>
</ul>
</div>
</div>
</nav>
<!--Fim do menu da aplicação-->
Essa dúvida foi gerada a partir de um comentário no artigo CSS Vertical Align - Dica
Fabio Pereira
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)