As always show search field

Question

I have a form where I have a search field, this field is only visible when the user clicks on the image of the existing magnifying glass and the field is displayed a line below my layout, I would like to leave it always visible and next to the magnifying glass icon, I’ve made some modifications but nothing to succeed in what I need.

What I did was this, I made the search field visible:

.navbar .search-form {
position: absolute;
right: 0;
z-index: 20;
float: right;
display: block;
top: 40px;

}

And I tried to change the position by changing the position of it, trying to position it higher, unsuccessfully.

the form code is:

        <div class="navbar-collapse collapse"> 
      <!-- Stat Search -->
      <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="get" class="searchform" action="#">
            <input type="text" value="" name="s" id="s" placeholder="Buscar...">
          </form>
        </div>
      </div>
      <!-- Fim da Busca --> 
      <!-- Início Links Superiores -->
      <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>
      <!-- Fim Links Superiores --> 
    </div>

The css of it is this:

.search-side {
    position: relative;
    float: right;
    top: 19px;
    right: -15px;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.show-search {
    position: relative;
    display: block;
    float: right;
}

.show-search i {
    font-size: 1.2em !important;
    display: block;
    color: #aaa;
    width: 36px;
    height: 36px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    line-height: 36px;
    text-align: center;
    background-color: #f2f2f2;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.show-search:hover i {
    color: #000;
}

/* Campo de Busca*/
.navbar .search-form {
    position: absolute;
    right: 0;
    z-index: 20;
    float: right;
    display: block;
    top: 40px;
}

.navbar .search-form:before {
    background-color: #ccc;
    top: -2px;
    content: '';
    display: block;
    height: 4px;
    width: 4px;
    z-index: 20;
    right: 15px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
}

.navbar .search-form form input {
    border: 2px solid #ccc;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    padding: 5px 14px;
    z-index: 22;
    color: #9d9d9d;
    box-shadow: none;
    -o-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    outline: none;
    box-shadow: none;
}

.navbar .search-form form {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}

The image on the page is this:

Answer 1

Their result will not be obtained, as they are with the property position defined as absolute.

But what does it mean?

It means that in relation to the div "father" it will have an absolute positioning with a distance of X px from the top and Y px from the side, so it is always appearing below the magnifying glass icon. The css that’s causing this problem is this one:

.navbar .search-form {
    position: absolute;
    right: 0;
    z-index: 20;
    float: right;
    display: block;
    top: 40px;
}

Look at this my fiddle where I did with the result you wish.

To solve your problem, you can set the div that encompasses the search icon and the form input, with display:inline-block so that it has the width of the two blocks, and not the total width of the parent div.

Then make the same inline-block definition for each of the two elements, the magnifying glass icon (or in my example, 'search') and the form input.

The important thing is to remember to remove the position:absolute for it is he who is causing the problem.