Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Mostrar item apenas no modo hamburguer

Referente ao curso Bootstrap 4: criando uma landing page responsiva, no capítulo Instalando o bootstrap e implementando a navbar e atividade Personalizando a navbar

por Luiz Felipe Santos Machado
| 53.9k xp | 5 posts

Olá! Minha dúvida é a seguinte: depois de adicionada a navbar, como fazer um elemento aparecer apenas quando o menu entra em modo hambúrguer? Exemplo:

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">início<span class="sr-only">(Página atual)</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 href="#">contato</a>
      </li>
    <--!ESSE ITEM SÓ APARECE NO HAMBURGER -->
    <li class="nav-item"> 
        <a class="nav-link href="#">Facebook</a>
      </li>
    <--! FIM ESSE ITEM SÓ APARECE NO HAMBURGER -->
    </ul>
  </div>

Tem como fazer isso? Desde já, agradeço pela atenção.

5 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Hardcore, tudo bem? À partir da versão 4 do Bootstrap, podemos controlar quando o menu hamburger deve aparecer ou não. Para isso eles adicionaram a classe navbar-expand que pode receber sm, md, lg e xl.

Tente adicionar navbar-expand-xl no seu navbar.

Espero ter ajudado.

por Luiz Felipe Santos Machado
| 53.9k xp | 5 posts

Fala Matheus! Obrigado pela resposta! Fiz a pergunta mas segui procurando uma solução, consegui fazer o que eu tinha em mente utilizando media queries. Agora o link para o Facebook só aparece quando o menu vira "hamburguer".

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Certo, então o problema foi resolvido? Não entendi.

solução!
por Luiz Felipe Santos Machado
| 53.9k xp | 5 posts

Problema resolvido, mas a solução não foi a sugerida. Usei :

@media (max-width: 480px) {
  .desktop{
    display:none;
  }
 }

De qualquer forma, agradeço pela atenção.

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Boa Luiz, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.