Entrar Ainda não tem acesso?
2
respostas

Menu Hamburguer não aparece

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 Soraia Conceição Barbosa
| 28.7k xp | 27 posts
Professora

Alguém poderia revisar, por favor? Não encontro o erro. O Menu hamburguer não aparece.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alura Books</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css"
</head>
   <header class="cabeçalho">

       <div class="container">
        <span class="cabeçalho__menu-hamburguer"></span>
        <img src="img/Logo.svg" alt="Logo da Alurabooks">

     </div>

     <div class="container">

      <a href="#"></a> <img src="img/Favoritos.svg" alt="Meus Favoritos"></a>
      <a href="#"></a> <img src="img/Compras.svg"   alt="Carrinho de Compras"></a>
      <a href="#"></a>  <img src="img/Usuário.svg"  alt="Meu perfil"></a>


    </div>
   </header>

<body>

</body>
</html>
@import url("styles/header.css");


:root{

    --cor-de-fundo: #EBECEE;
    --branco: #FFFFFF

}

body {

    background-color: var(--cor-de-fundo);
}

.cabeçalho__menu-hamburguer {

    width: 24px
    height: 24px;
    background-image: url("../img/Menu.svg");
    display: in-line-block;
}

.cabeçalho {

    background-color: var(--branco);
    display: flex;
    justify-content: space-between;

}
2 respostas
por Estudante
| 177.3k xp | 195 posts

Boa noite Soraia, Copiei seu código para testar aqui no meu pc, e tem alguns pontos que precisam ser corrigidos, primeiro no seu HTML:

Na linha abaixo, está faltando o fechamento da tag:

// DE:
<link rel="stylesheet" href="styles.css"
// PARA: 
<link rel="stylesheet" href="styles.css">

Todo o conteúdo do site, tem que ser escrito dentro da tag body, e o seu está iniciando antes:

// DE:
<header>
</header>
<body>
</body>

// PARA: 
<body>
   <header>
   </header>
   ...conteudo do site...
</body>

Ao nomear classes e id, não utilize palavras com acentos, e no seu caso, troque a "ç", pela letra "c", no inicio é estranho, mas, você se acostuma. 

// DE: 
class="cabeçalho"

// PARA: 
class="cabecalho"

Na código abaixo, a tag a, está sendo fechada duas vezes, uma próxima ao inicio e a outra no final:

// DE: 
<a href="#"></a> <img src="img/Favoritos.svg" alt="Meus Favoritos"></a>
<a href="#"></a> <img src="img/Compras.svg"   alt="Carrinho de Compras"></a>
<a href="#"></a>  <img src="img/Usuário.svg"  alt="Meu perfil"></a>

// PARA:
<a href="#"><img src="img/Favoritos.svg" alt="Meus Favoritos"></a>
<a href="#"><img src="img/Compras.svg" alt="Carrinho de Compras"></a>
<a href="#"><img src="img/Usuário.svg" alt="Meu perfil"></a>

Quanto ao arquivo CSS, começe alterando as letras "ç" pela letra "c". Depois, na classe abaixo, está faltando o ponto e virgula ";" em um item, e em outro a escrita está incorreta:

.cabecalho__menu-hamburguer {
  width: 24px
  //width: 24px;
  //...restante_do_codigo;
  display: in-line-block;
  //display: inline-block;
}

Acredito que isso resolva a questão do ícone não estar aparecendo.

por Soraia Conceição Barbosa
| 28.7k xp | 27 posts
Professora

Nossa, com tantos erros não tinha como dar certo, né? rs Cansaço e falta de atenção. Muitíssimo obrigada, funcionou! :)