2

esto tentando fazer um nav bar com um campo de pesquisa centralizado.. eu até consegui fazer mais acredito não estar da melhor forma, pois quando abro em um smartphone fica tudo estranho...

Segue abaixo meu código.

 <div class="top_nav">
        <div class="nav_menu">
          <nav>
            <div class="nav toggle">
              <a id="menu_toggle"><i class="fa fa-bars"></i></a>
            </div>

            <!-- campo para pesquisa-->
            <form class="navbar-form navbar-left" action="listaProcessos.html">
              <div class="input-group" style="margin: 4px 0 0 250px; width:400px">
                  <input type="text" class="form-control" placeholder="Pesquisar">
                  <div class="input-group-btn">
                    <button class="btn btn-default" type="submit" >
                        <i class="glyphicon glyphicon-search" style="color:#5A738E"></i>
                    </button>
                  </div>
              </div>
            </form>
            <!--fim campo de pesquisa-->


          </nav>
        </div>
    </div>
3
  • Coloca teu css, fica mais fácil de te ajudar
    – Bia Silva
    3/09/2018 às 2:05
  • Por acaso vc está usando Bootstrap? Se sim qual Versão?
    – hugocsl
    3/09/2018 às 11:07
  • A versão do bootstrap é v3.3.7 3/09/2018 às 12:19

2 Respostas 2

0

Tente usar:

style="padding: 0 10% 0 10%;"

no lugar de:

style="margin: 4px 0 0 250px; width:400px"

você pode ajustar o padding em porcentagem para deixar o input de pesquisa no tamanho desejado.

1
  • pra mim isso já foi o suficiente, valeu man. 11/09/2018 às 19:04
0

Você pode utiliza o seguinte código para centralizar, mas deve ter outro elemento no final para que tenha o alinhamento dos 3:

display: flex
justify-content: space-between

Código de funcionamento:

https://codepen.io/gabrielgoncalvesr/pen/eLWByR

Veja outros exemplos de utilização.

Você pode também tenta fazer com sistema de grid do Bootstap, mas não sei se é o mais adequado para um navbar.

Código de funcionamento:

https://codepen.io/gabrielgoncalvesr/pen/GXmNeK

1
  • Jovem só que ele está usando o Bootstrap 3... E mesmo se foce o 4 vc poderia usar as classes nativas do framewark tipo d-flex, justify-content-center, w-100 como vc pode consultar aqui getbootstrap.com/docs/4.0/utilities/flex
    – hugocsl
    3/09/2018 às 12:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .