Create navbar with centralized search field

Navigation
2

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 shape, because when I open a smartphone it's strange ...

Below is my code. 

 <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>
    
asked by anonymous 03.09.2018 / 02:49

2 answers

0

Try using:

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

instead of:

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

You can adjust the percentage padding to leave the search input in the desired size.

    
03.09.2018 / 05:30
0

You can use the following code to center, but you must have another element at the end so that it has the alignment of the 3: 

display: flex
justify-content: space-between

Operating Code:

link

  

See other usage examples .

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

Operating Code:

link

    
03.09.2018 / 14:41
My modal does not load Java - Print on port Bematech_COM3