Create navbar with centralized search field

Question

are trying to make a Nav bar with a centralized search field.. I even managed to do more I believe I’m not in the best way, because when I open on a smartphone everything gets weird...

Follow my code below.

 <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>

Answer 1

You can use the following code to center, but there must be another element at the end to have the alignment of the 3:

display: flex
justify-content: space-between

Operating code:

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

See other examples of use.

You can also try to do with Bootstap grid system, but do not know if it is the most suitable for a navbar.

Operating code:

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

Answer 2

Try to use:

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

in place of:

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

you can adjust the padding in percentage to let the search input in the desired size.