Possuo um formulário onde tenho um campo de busca, esse campo só fica visível quando o usuário clica na imagem da lupa existente e o campo é exibido uma linha abaixo do meu layout, gostaria de deixar o mesmo sempre visível e ao lado do ícone da lupa, fiz algumas modificações mas nada de obter sucesso no que preciso.
O que fiz foi isso, deixei o campo de busca visível:
.navbar .search-form {
position: absolute;
right: 0;
z-index: 20;
float: right;
display: block;
top: 40px;
}
E tentei alterar a posição alterando a posição do mesmo, tentando posiciona-lo mais acima, sem sucesso.
o código do formulário é esse:
<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>
O css do mesmo é esse:
.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; }