Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Conteúdo da Navbar parou de alinhar à direita

Oi pessoal. Fui seguindo as aulas, coloquei o menu alinhado a direita com "d-flex justify-content-end" e funcionou, mas em dado momento (que eu só percebi alguns exercícios depois), o conteúdo voltou a se alinhar à esquerda, e não consigo mais fazer voltar. Segue código:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav d-flex justify-content-end">
        <li class="nav-item active">
          <a class="nav-link" href="#">Início <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Receitas</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Quem somos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contato</a>
        </li>
      </ul>
    </div>
  </nav>
3 respostas

Aqui o meu CSS

.cor-nav { background-color: darkred; }

.navbar-brand { font-family: 'Pacifico', cursive; }

.imagem-carrossel1 { object-fit: cover; object-position: 0 80%; height: 400px; }

.imagem-carrossel2 { object-fit: cover; height: 400px; }

.temporaria img { width: 100%; }

.fonte_pacifico { font-family: 'Pacifico', cursive; }

.vinho { color: darkred; }

.botao-cor { color: white; background-color: darkred; border: none; }

.botao-cor:hover { color: white; background-color: red; border: none; }

.borda-cor { border-color: darkred; max-width: 18rem; }

.imagem-artigo { object-fit: cover; height: 200px; }

.h-60 { height: 60%; }

solução!

Oi, Caio, tudo bem?

Faltou a classe justify-content-end na div collapse. Essa classe vai jogar o menu para o final da caixa, ficando assim:

<div class="collapse navbar-collapse justify-content-end" id="navbarNav">

Testa e me fala se deu certo!

Deu certo! Eu estava colocando essa classe na ul ao invés da div x)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software