Oi pessoal. Estou fazendo um projeto de estudos após ter concluído o curso, e gostaria de saber se é possível fazer a seguinte navbar:
Na esquerda, fica o menu sempre colapsado, independente do tamanho da tela. No centro o nome do site. Na direita, o form de busca. Para telas pequenas, ele cairia abaixo do nome do site.
hoje, com a Alura e o Google Gemini
O form pode colapsar também em telas pequenas, se for mais prático.
Fala ai Caio, tudo bem? É possível sim, talvez você precisa estilizar um pouco o navbar do Boostrap, basicamente poderia criar uma classe sua:
<nav class="meu-menu">
<div>
// menu
</div>
<div>
// nome do site
</div>
<div>
// busca
</div>
</nav>Dai com Flexbox você consegue distribuir o espaçamento entre eles:
.meu-menu {
display: flex;
justify-content: space-between;
}O exemplo que eu mandei seria adicionando sua classe, mas, no real ela será usada junto com o navbar e demais elementos do Bootstrap.
O ponto importante é meu-menu ter os três filhos separados para que o espaçamento entre eles seja feito.
Espero ter ajudado.