Entrar Ainda não tem acesso?
1
resposta

Dúvida] Menu hamburguer não aparece com @import

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 Estudante
| 34.4k xp | 14 posts

Olá, boa noite! Alguém pode me ajudar com isso? Meu menu não aparece!!

<header class="cabeçalho">
    <span class="cabeçalho__menu-hamburguer"></span>
    <img src="img/logo.svg" alt="Logo da AluraBooks">
    <a href="#"><img src="img/favoritos.png" alt="Meus favoritos"></a>
    <a href="#"><img src="img/Compras.svg" alt="Carrinhos de Compras"></a>
    <a href="#"><img src="img/Usuario.svg" alt="Meu perfil"></a>

</header>

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

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

body {

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

.cabeçalho__menu-hamburguer { width: 24px; height: 24px; background-image: url("../img/Menu.svg"); display: inline-block; }Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Bruna Machado
| 95.6k xp | 28 posts
Estágio em GIS

Olá!

No arquivo styles.css coloque o seguinte código:

@import url("header.css");

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

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

h1 {
    background-color: white;
}

no arquivo header.css coloque o seguinte código:

.cabecalho__menu-hamburguer {
    width: 48px;
    height: 48px;
    background-image: url("../img/Menu.svg");
    display: inline-block;
}

Funcionou? Caso não tenha funcionado envia pra mim o seu código :)