Solucionado
Estou tentando criar um menu superior para a minha página, mas estou tendo muita dificuldade, e nada do que encontro na internet está resolvendo.
Quero mover essa barra de busca para a linha de baixo caso a tela seja diminuída (ex.: smartphone).
A única forma que me ajudou, foi duplicando esse input e escondendo um e mostrando o outro. Mas quero fazer da forma certa.
Como faço isso?
Oi Daniel,
Existem algumas formas de tratar. A forma mais simples é com media queries no CSS.
Exemplo:
/* estilo genérico */
.minha-classe-css {
background-color: blue;
}
/* estilo para quando a tela tiver no máximo 480px */
@media (max-width: 480px) {
.minha-classe-css {
background-color: red;
}
}
Geralmente, acaba sendo necessário de outras definições de tamanhos, então o conselho é que dê uma googlada no termo media query sizes.
Ter dois inputs e esconder um dependendo do tamanho da tela e da estrutura do site, acaba não sendo uma abordagem ruim, as vezes é necessário mesmo e até mesmo bem mais simples.
No seu caso, eu faria com que a barra utilizasse Flexbox do CSS.
No Flexbox é possível ordenar os elementos, então dava pra aproveitar esse recurso para que, quando a tela tiver um tamanho pequeno, que seja trocada a ordem do campo de busca para a última posição e também aumentava a largura dele para 100% (talvez não o campo propriamente, melhor se for uma div que segura o campo). Dessa forma, em telas pequenas, sua barra superior ficaria com a logo e ícones, seguido pelo campo de busca na linha abaixo.
Sugestão de guia sobre Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Bom dia, Jonas
Atualmente estou usando media query mesmo. Mas vou olhar esse link que vc indicou. Muito obrigado!!!
Estou me matando com isso! XD
Fala Jonas,
Cara, obrigado pela magia!
Vou focar mais em estudar CSS!!!
Muito obrigado mesmo!!!
De nada! Não esquece de marcar minha resposta como solução. Bons estudos!