DEIXANDO A CAIXA DE BUSCA FIXA NO TOPO AO ROLAR A PAGINA
Ola pessoal como posso deixar esta minha caixa de pesquisa fixa no topo do site ao rolar a pagina para baixo
Tentei usar este css aqui mais não deu certo
/FIXAR BARRA /
.fixar{
margin: auto auto;
}
.fixar:nth-child(1) {
height: 1000px;
background: black;
width: 80%
}
.fixar:nth-child(2) {
height: 30px;
background: black;
width: 100%;
position: fixed !important;
top: 10px;
left: 0;
}
<style type="text/css">
#caixa-b-1 {
text-align: center;
margin: 0;
padding: 0px 0px;
width: 100%;
display: inline-block;
border: solid 0px #D2D2D2;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-goog-ms-border-radius: 0px;
border-radius: 0px;
}
.pesquisar-form-b-1 {
font: normal bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
padding: 15px;
color: #000;
border: 1px solid #D2D2D2;
background: #FFF;
width: 95%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 10px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.0) inset;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.0) inset;
box-shadow: 1px 1px 2px rgba(0,0,0,0.0) inset;
}
#button-submit {
color: #000000;
margin: 0 0 0 5px;
width: 52px;
height: 52px;
border: 10px solid #D2D2D2;
font: normal bold 19px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
text-shadow: 0 px 5px rgba(0,0,0,.6);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 2px;
background: url("./img/lupa.png") no-repeat;
margin-left: -40px;
border-width: 0px;
width: 30px;
height: 30px;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#));
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
}
/FIXAR BARRA /
.fixar {
margin: auto auto;
}
.fixar:nth-child(1) {
height: 1000px;
background: black;
width: 80%
}
.fixar:nth-child(2) {
height: 30px;
background: black;
width: 100%;
position: fixed !important;
top: 10px;
left: 0;
}
</style>
<div class="fixar" id="caixa-b-1">
<form action="buscar" method="get" name="input" target="_top">
<input class="pesquisar-form-b-1" id="termo_busca" name="q" onclick="" type="text" autocomplete="true" placeholder="" x-webkit-speech="x-webkit-speech" />
<input id="button-submit" type="submit" value=" " />
</form>
</div>
Desde já agradeço......Discussão (0)
Carregando comentários...