Aligns navbar bootstrap text vertically

Question

I’m using in my project two navbar and I’m having a problem aligning the text of the first menu vertically, I tried to create a structure to change but did not succeed, what I have is this:

First Navbar:

    <div class="navbar-collapse collapse" id="MenuUm">
      <div class="search-side"> <a href="#" class="show-search"><i class="icon-search-1"></i></a>
        <div class="search-form">
          <form autocomplete="off" role="search" method="POST" class="searchform" action="resultado.php">
            <input type="text" value="" name="s" id="s" placeholder="Buscar...">
          </form>
        </div>
      </div>
      <!-- Início da Lista de Navegação-->
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="catalogos.php">catálogos e manuais</a> </li>
        <li> <a href="cores.php">cores e linha</a> </li>
        <li> <a href="garantia.php">garantia e uso</a> </li>
      </ul>
    </div>

Second Navbar:

    <div class="navbar-collapse collapse" id="MenuDois"> 
      <!-- Início da Lista de Navegação-->
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="index.php">INÍCIO</a> </li>
        <li> <a href="empresa.php">EMPRESA</a> </li>
        <li> <a href="produtos.php">PRODUTOS</a> </li>
        <li> <a href="representantes.php">REPRESENTANTES</a> </li>
        <li> <a href="encontrar.php">ONDE ENCONTRAR</a> </li>
        <li><a href="contato.php">CONTATO</a></li>
      </ul>
    </div>

The css of Navbar is like this:

.navbar-nav {
  margin: 7.5px -15px;
}

.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

What I tried to do was create two different structures for each Navbar, But like I said, it didn’t work out.

.navbar-nav-1 > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

.navbar-nav-2 > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

To make it easier to understand I’ll attach an image of what I’m trying to do, see: Example of what I need

The site under development is this: Website

Answer 1

With the use of Grid bootstrap to make this menu without additional css.

Step by step:

1º - I added a container to center

2° - I added 1 row divided in 4|8, the 4 will have the logo of 8 the menus.

3° - I added the logo normally inside the col-md-4.

4º - I added each menu in a Row inside the col-md-8 , each menu received the pull-right, to be right aligned.

Example:

  <div class="container">
     <div class="row">
        <div class="col-md-4">
           <img src="http://ancestofados.com.br/anc/images/anc.fw.png" alt="logo">
        </div>
        <div class="col-md-8">

           <!--  MENU AQUI 1-->
           <div class="row">
              <div class="col-md-11 pull-right">
                 <ul class="nav nav-pills">
                    <li role="presentation"><a href="#">Catálogos e manuais</a></li>
                    <li role="presentation"><a href="#">Cores e linha </a></li>
                    <li role="presentation"><a href="#">Garantia e uso </a></li>
                    <li role="presentation">
                       <form class="navbar-form" role="search">
                          <div class="input-group">
                             <input type="text" class="form-control" placeholder="Pesquisar..." name="srch-term" id="srch-term">
                             <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                             </div>
                          </div>
                       </form>
                    </li>
                 </ul>
              </div>
           </div>

           <!--  MENU AQUI 2 -->
           <div class="row">
              <div class="col-md-12 pull-right">
                 <ul class="nav nav-pills">
                    <li role="presentation"><a href="#">INÍCIO </a></li>
                    <li role="presentation"><a href="#">EMPRESA </a></li>
                    <li role="presentation"><a href="#">PRODUTOS </a></li>
                    <li role="presentation"><a href="#">REPRESENTANTES </a></li>
                    <li role="presentation"><a href="#">ONDE ENCONTRAR </a></li>
                    <li role="presentation"><a href="#">CONTATO</a></li>
                 </ul>
              </div>
           </div>

        </div>
     </div>
  </div>

As it turned out:

See on the jsfiddle

Answer 2

For the site you went through, I think it would be interesting to review the structure of your header because the bootstrap framework was not made to keep 2 navbar inside each other. From what I saw on the link you went through, what you could do is add this:

using the flex property (future of CSS rs)

.navbar-top > .menu1 >ul.navbar-right { 
    height: 101px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

using the old form (like table)

.navbar-top > .menu1 >ul.navbar-right { 
    height: 101px;
    display: table;
}

.navbar-top > .menu1 >ul.navbar-right li a {
    height: 101px;
    display: table-cell;
    vertical-align: middle;
}

Also, in terms of design you putting that hidden search there will mess you up as to the sizes of media queries. the best to do would be for you to insert it inside the navbar as a li and open, thus not taking up memory for the animations, its design is already handled when the bootstrap adapt and get the smaller menu.

Answer 3

In style.css, in class search-side add the property margin-top with 15px

.search-side {
    margin-top: -15px !important;
}

At first navbar define a class name as navbar-primeira and add property

.navbar-primeira { 
   margin-top: 35px !important; 
}

And for the second navbar add the properties

ul li a { 
    max-height: 55px !important; 
    margin-top: -15px !important;
}

And finally, in the div with class hidden-header, remove the attribute style="height: 161px;" which was set directly on html.

I left Outline on, but that’s it.