Mostrar item apenas no modo hamburguer | Bootstrap 4: criando uma landing page responsiva

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

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

| 5304.5k xp | 9004 posts

Instrutor Senior Software Engineer

03/02/2020

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

04/02/2020

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

| 5304.5k xp | 9004 posts

Instrutor Senior Software Engineer

04/02/2020

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

solução!

por Luiz Felipe Santos Machado

| 53.9k xp | 5 posts

07/02/2020

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

| 5304.5k xp | 9004 posts

Instrutor Senior Software Engineer

07/02/2020

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

Abraços e bons estudos.