Entrar Ainda não tem acesso?
4
respostas

Imagem Menu e logo

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 Rebeca Alves da Silva
| 91.4k xp | 14 posts
Assistente Administrativo

Na minha pagina não ta indo a imagem Menu e sim a imagem logo :( 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">   
</head>
<body>
    <head class="cabecalho">
        <span class="cabecalho__menu-hamburguer"></span>
        <img src="img/logo.svg" alt="Logo da Alurabooks">
        <a href="#"><img src="img/Favoritos.svg" alt="Meu favoritos"></a>
        <a href="#"><img src="img/Compras.svg" alt="Carringo de compras"></a>
        <a href="#"><img src="img/Usuário.svg" alt="Meu perfil"></a>
        

    </head>
</body>
</html>

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

.cabecalho__menu-hambuerguer {
    width: 24px;
    height: 24px;
    background-image: url('../img/Menu.svg');
    display: inline-block;
}
4 respostas
por Renan Lima
| 3708.1k xp | 7842 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Rebeca! Tudo bem?

Pelo código que você compartilhou, parece que há um erro de digitação no nome da classe do elemento que está tentando exibir a imagem do menu. No seu CSS, você escreveu "cabecalho__menu-hambuerguer", mas no HTML está como "cabecalho__menu-hamburguer". Perceba que a palavra "hamburguer" está escrita de forma errada no CSS t, tem uma letra "e" amais depois da letra "u" na palavra "hamburguer".

Para corrigir esse problema, basta ajustar a classe no HTML para "cabecalho__menu-hambuerguer" (igual ao CSS) e a imagem do menu deve aparecer corretamente.

<span class="cabecalho__menu-hambuerguer"></span>

Espero ter ajudado e bons estudos!

por Rebeca Alves da Silva
| 91.4k xp | 14 posts
Assistente Administrativo

Oi, já fiz a modificação do e agora ta igual, mas o menu não quer aparecer 

<!DOCTYPE html>
<html lang="br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">   
</head>
<body>
    <head class="cabecalho">
        <span class="cabecalho__menu-hambuerguer"></span>
        <img src="img/logo.svg" alt="Logo da Alurabooks">
        <a href="#"><img src="img/Favoritos.svg" alt="Meu favoritos"></a>
        <a href="#"><img src="img/Compras.svg" alt="Carringo de compras"></a>
        <a href="#"><img src="img/Usuário.svg" alt="Meu perfil"></a>
        

    </head>
</body>
</html>

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

.cabecalho__menu-hambuerguer{
    width: 24px;
    height: 24px;
    background-image: url('../img/Menu.svg');
    display: inline-block;
}
por Rebeca Alves da Silva
| 91.4k xp | 14 posts
Assistente Administrativo

consegui mudar, mas agora o menu não quer aparecer

por Michele de Oliveira Ascoli
| 27.5k xp | 6 posts

Oi Rebeca! Espero que esteja tudo bem.

Eu estava com um pequeno problema em que aparecia apenas um pedaço da imagem do Menu.svg. Alterei o tamanho para 48px, que é o tamanho que está lá no Figma e resolveu o problema, talvez esse também seja o seu.

Outra coisa, reparei que lá na tag está assim: <html lang="br">, troca por <html lang="pt-br">.

Espero ter ajudado!