menu prsonalzado no bootstrap

jcvlanova · January 24, 2020

Galera, gostaria de saber se e possivel colocar no NavBar do Boostrap o icone do menu tipo sanduiche, de tal forma que o menu vertical ou horizontal somente fosse mostrado quando clicado no icone sem necessariamente expandir o height do Navbar? Desculpem a ignorancia. Mas os exemplos que vi são sempre usando a função collapse da class navbar collapse. Isso faz com que o menu (horizontal ou vertical), esteja sempre visivel e o botao só apareça quando voce diminui o tamanho da tela, que é quando o menu fica oculto. Quando isso acontece, o NavBar é expandido. Não é isso que quero. Quero o Navbar com altura fixa de 140 px sempre, com o botao tipo sanduiche a esquerda meu logo no centro e um campo de busca a direita. Ao clicar no botão os menus seriam mostrados normalmente. Consigo fazer isso com o css, sem usar o Bootstrap, mas nao é isso que quero. Alguem pode me ajudar ?

Meu código está assim :

<div class="navbar navbar-secondary navbar-dark">
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
<a href="#" class="navbar-brand"><img src="/imagens/LogoJornal.png">
Aqui entra os itens de menu:
<div id="menu class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="Home">
</li>
<li class="nav-item active">
<a class="nav-link" href="Principal">
</li>
...
</ul>
<form class="form-inline">
<input type="''text" placeholder="Buscar" name="buscar" class="form-control">
<input type="submite" class="btn btn-outline">
</button>