Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

MENU HAMBURGUER NÃO APARECE

Referente ao curso HTML e CSS: responsividade com mobile-first

por Sanrley Diogo Lago dos Santos
| 20.7k xp | 4 posts
Analista de Processos

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

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheets" href="styles.css">
    <link rel="stylesheets" href="reset.css">
</head>
    <body>
        <header class="cabeçalho">
            <span class="cabecalho__menu-hambuguer"></span>
            <img src="assets/Logo.svg" alt="logodaalura">
            <a href="#"><img src="assets/Favoritos.svg" alt="meus favoritos"></a>
            <a  href="#"><img src="assets/Sacola.svg" alt="meu carrinho de compras"></a>
            <a href="#"><img src="assets/Usuario.svg" alt="meu perfil"></a>
        </header>

    </body>
</html>

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

:root{
    --cor-de-fundo:#EBECEE
}

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

.cabecalho__menu-hambuguer {
    width: 24px;
    height: 24px;
    background-image: url("../assets/Menu.svg");
    display: inline-block;
}
1 resposta
solução!
por NATHALIA QUEIROZ
| 2169.3k xp | 5099 posts
Alura Scuba Team Suporte Educacional

Oii, Sanrley! Tudo bem?

Obrigada por disponibilizar um trecho do seu código. Por ele pude observar que foi usado o <link rel="stylesheets" href="styles.css"> e <link rel="stylesheets" href="reset.css">, com o stylessheet no plural e utilizamos no singular.

Sugiro que realize a modificação. Segue o código refatorado:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="reset.css">
</head>
    <body>
        <header class="cabeçalho">
            <span class="cabecalho__menu-hambuguer"></span>
            <img src="assets/Logo.svg" alt="logodaalura">
            <a href="#"><img src="assets/Favoritos.svg" alt="meus favoritos"></a>
            <a  href="#"><img src="assets/Sacola.svg" alt="meu carrinho de compras"></a>
            <a href="#"><img src="assets/Usuario.svg" alt="meu perfil"></a>
        </header>

    </body>
</html>

Dessa forma, o menu hambúrguer deverá funcionar, realize as mudanças e teste também.

Espero que dê certo! Qualquer dúvida, compartilhe no fórum para podermos te ajudar.

Bons estudos, Sanrley!