Entrar Ainda não tem acesso?
1
resposta

[Bug] Menu-Hambúrguer 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 Wallace Henrique Batista Santos
| 31.1k xp | 10 posts

Index.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <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="style.css">
    </head>
    <body>
        <header class="cabecalho">
            <div class="conteiner">
                <span class="cabecalho__menu-hamburguer"></span>
                <img src="assets/Logo (1).png" alt="Logo da Alura Books">
            </div>

            <div class="conteiner">
                <a href="#"><img src="assets/Favoritos.png" alt="Meus Favoritos"></a>
                <a href="#"><img src="assets/Sacola.png" alt="Carrinho de compras"></a>
                <a href="#"><img src="assets/Usuario.png" alt="Meu perfil"></a>
            </div>
        </header>
    </body>
</html>

styles.css

@import url("../styles/header.css");

:root {
    --cor-de-fundo: #EBECEE;
    --branco: #ffffff;
}

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

header.css 


.cabecalho__menu-hamburguer {
    width: 40px;
    height: 40px;
    background-image: url("/assets/Menu.png");
    display: inline-block;
}

.cabecalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeOhei vários outros tópicos do fórum mas nenhum corresponde ao meu erro

1 resposta
por Victor Costa Santos
| 1919k xp | 3680 posts
Alura Scuba Team Monitor de ForumOps

Olá, Wallace!

O erro acontece, por questões de erro de endereço, sendo assim deixo algumas observações que devem ser reparadas para que tudo funcione.

1 - No seu HTML, ele está procurando o arquivo "style.css" na linha:

<link rel="stylesheet" href="style.css">

Mas o arquivo se chama, "styles.css", com um "s" a mais, repare a linha para:

<link rel="stylesheet" href="styles.css">

2 - No seu arquivo styles.css, o import está como @import url("../styles/header.css");. Observe que o seu arquivo styles.css está na mesma pasta que o header, o que ocasionar mais erros. Peço e recomendo que siga a estrutura da aula, na qual o Arquivo styles.css e o reset.css está fora da pasta styles, junto com o arquivo HTML, para retirar dessa pasta basta segurar o botão de click sobre o arquivo e arrastar para fora da pasta. Daí, o caminho deve ficar assim:

@import url("./styles/header.css");

:root {
    --cor-de-fundo: #EBECEE;
    --branco: #ffffff;
}

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

Após fazer essas alterações, atualize a página e veja se o menu hambúrguer aparece corretamente.

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!