Jump to content
jcvlanova

menu prsonalzado no bootstrap

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By gabybarross
      Amigos, preciso da ajuda de vocês. 
      Meu site vende um serviço e gostaria de saber como faço após a compra desse serviço que seja automaticamente incluído um perfil para o usuário. Isso porque gostaria de fazer um menu em que apenas quem comprou o serviço consiga visualiza-lo. 
      OBrigada gabriela
    • By Carlos Web Soluções Web
      Olá....boa tarde !!

      Crei um menu multi-level simples em CSS:
       
      MENU_MOLDE

      , gostaria agora que, para:

      @media screen and (max-width: 900px)

      o menu se torne responsável, com ul li a {float: none; text-align: left; width: 100%} e ativar o submenu ao clicá-lo e desativar ao clica-lo novamente!!

      Alguém poderia me ajudar ??
      Desde já muito obrigado !!
    • By Theusy
      Boa tarde pessoal!
      Sou novo em html e css e me deparei com um problema enquanto estava "brincando" de programar.
      Provavelmente um erro bobo de programação, ou algo do tipo.
      Agradeço qualquer tipo de ajuda,
      Obrigado desde já!


    • By AlanB.
      Boa tarde galera, tudo bem? estou tentando aprender javascript, mas o que eu preciso fazer eu ainda não sei.
       
      Eu tenho o meu menu do site e logo abaixo tenho a section serviços e a section produtos. Eu queria que inicialmente o background do menu fosse azul, mas quando a pessoa desse um scroll e chegasse na section serviços, o background do menu alterasse a cor. Alguem pode me ajudar? 
    • By sthefany silva
      oi, estou desenvolvendo uma página html e estou utilizando bootstrap, gostaria de fazer um menu com abas e que fosse levemente iclinado para direita... mais ou menos como essa ideia do arquivo... 
       
      segue meu código html:
       
      <ul class="nav nav-tabs" id="#" role="tablist">
       
          <li class="nav-item active">         <a class="nav-link" id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <i class=" fa fa-list-alt"></i> Tarefa</a>   </li>    <li class="nav-item">       <a class="nav-link" id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><i class="fa fa-lightbulb-o"></i> Sugestão</a>    </li>      <li class="nav-item">            <a class="nav-link" id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><i class=" fa fa-search"></i> FAQ</a>       </li> </ul>  segue meu código css:
      .nav-tabs { border-bottom: 2px solid var(--cor-primaria-2); } .nav-tabs > li { float: left; margin-bottom: -1px; /* margin-top: 0px; */ } .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid; border-bottom: 0px; border-radius: 4px 4px 0 0; color: #666666; background: rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:hover { border-color: #FFFFFF; }  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.