Entrar Ainda não tem acesso?
1
resposta

Menu Hamburguer aparece duplicado

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Header, Flexbox e @import

por Lucas2005sf
| 30.9k xp | 1 posts
Assistente Administrativo 

```<!DOCTYPE html>
<html lang="pt-br">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="style.css" />
  <title>AluraBooks</title>
 </head>

 <body>
  <header class="cabecalho">
   <div class="container">
    <input type="checkbox" id="menu" class="container__botao">
    <label for="menu">
     <span class="cabecalho__menu-hamburguer"></span>
    </label>
    <ul class="lista-menu">
     <li class="lista-menu__titulo">Categorias</li>
     <li class="lista-menu__item"><a href="#" class="lista-menu__item">Programação</a></li>
     <li class="lista-menu__item"><a href="#" class="lista-menu__item">Front-End</a></li>
     <li class="lista-menu__item"><a href="#" class="lista-menu__item">Infraestrutura</a></li>
     <li class="lista-menu__item"><a href="#" class="lista-menu__item">Business</a></li>
     <li class="lista-menu__item"><a href="#" class="lista-menu__item">Design e UX</a></li>
    </ul>
    <span class="cabecalho__menu-hamburguer container__imagem"></span>
    <img src="/assets/Logo.svg" alt="Logo da Alurabooks"  class="container__imagem"/>
   </div>
   <div class="container">
    <a href="#"><img src="/assets/Favoritos.svg" alt="Meus favoritos" class="container__imagem"/></a>
    <a href=""><img src="/assets/Compras.svg" alt="Carrinho de compras" class="container__imagem"/></a>
    <a href=""><img src="/assets/Usuário.svg" alt="Meu perfil" class="container__imagem"/></a>
   </div>
  </header>
 </body>
</html>


.cabecalho__menu-hamburguer{
 width: 40px;
 height: 40px;
 background-image: url(../assets/Menu.svg);
 background-repeat: no-repeat;
 background-position: center;
 display: inline-block;
}

.cabecalho{
 background-image: var(--branco);
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.container{
 display: flex;
 align-items: center;
}

.container__imagem{
 padding: 1em;
}
1 resposta
por Victor Costa Santos
| 1937k xp | 3733 posts
Alura Scuba Team Monitor de ForumOps

Olá Lucas!

O erro acontece porque no seu HTML tem dois <span class="cabecalho__menu-hamburguer">. Para resolver isso, vamos remover o elemento duplicado e ajustamos a estrutura do HTML.

Aqui está o código ajustado:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="reset.css" />
  <link rel="stylesheet" href="style.css" />
  <title>AluraBooks</title>
</head>

<body>
  <header class="cabecalho">
    <div class="container">
      <input type="checkbox" id="menu" class="container__botao">
      <label for="menu">
        <span class="cabecalho__menu-hamburguer"></span>
      </label>
      <img src="/assets/Logo.svg" alt="Logo da Alurabooks" class="container__imagem"/>
    </div>
    <div class="container">
      <a href="#"><img src="/assets/Favoritos.svg" alt="Meus favoritos" class="container__imagem"/></a>
      <a href="#"><img src="/assets/Compras.svg" alt="Carrinho de compras" class="container__imagem"/></a>
      <a href="#"><img src="/assets/Usuário.svg" alt="Meu perfil" class="container__imagem"/></a>
    </div>
  </header>
</body>
</html>

Agora só fazer um check-up, certificando que o <span class="cabecalho__menu-hamburguer"></span> só apareça uma vez dentro do seu código HTML. Isso deve resolver o problema do menu hambúrguer duplicado.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!