Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Menu Hamburguer não ficou alinhado corretamente a esquerda.

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 Manuel Diogo Garofalo De Castro Moura
| 20.4k xp | 67 posts
Fiscal de Loja

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="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="cabecalho">
        <div class="container">
    <span class="cabecalho__menu-hamburguer container__imagem"></span>
    <img src="img/Menu (1).svg" alt="Logo da Alura Books" class="container__imagem">
    <img src="img/Polygon 1 (Stroke).svg" alt="triangulo laranja">
    </div>
    <div class="container">
    <a href="#"><img src="img/Favoritos (1).svg" alt="Meus Favoritos" class="container__imagem"></a>
    <a href="#"><img src="img/Compras (1).svg" alt="Sacola de compras" class="container__imagem"></a>
    <a href="#"><img src="img/Usuario (1).svg" alt="Meu Perfil" class="container__imagem"></a>
    </div>
    </header>

    
</body>
</html>


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

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

.container {
    display: flex;
    align-items: center;
}

.container__imagem {
    padding: 1em;
}

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

:root {
    --cor-de-fundo: #ebecee;
    --branco: #FFF;

}

body {
    background-color: var(--cor-de-fundo);
}
3 respostas
por Breno Bosser Morim
| 891.3k xp | 102 posts
Estagiário em Desenvolvimento React

Olá! Tudo bem? O que está acontecendo é que o elemento do menu está duplicado, você tem um span e um img que estão tentando exibir o menu, o problema é que a url da imagem que está no CSS do span está errada, então não aparece nenhuma imagem mas mesmo assim o elemento ocupa espaço na tela, dando a impressão de que o menu da img não está alinhado à esquerda, para resolver você pode simplesmente remover a tag img com o menu. O código ficaria assim:

<header class="cabecalho">
    <div class="container">
        <span class="cabecalho__menu-hamburguer container__imagem" aria-label="Menu"></span>
        <!-- img do Menu removida -->
        <img src="img/Polygon 1 (Stroke).svg" alt="triangulo laranja">
    </div>
    <div class="container">
        <a href="#"><img src="img/Favoritos (1).svg" alt="Meus Favoritos" class="container__imagem"></a>
        <a href="#"><img src="img/Compras (1).svg" alt="Sacola de compras" class="container__imagem"></a>
        <a href="#"><img src="img/Usuario (1).svg" alt="Meu Perfil" class="container__imagem"></a>
    </div>
</header>

Adicionei a propriedade aria-label por questões de acessibilidade, já que a imagem do menu só existirá no CSS, que ficará assim:

.cabecalho__menu-hamburguer {
        width: 24px;
        height: 24px;
        background-image: url("../img/Menu (1).svg");
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
}

Depois só verifique se a url do CSS está de acordo com os nomes das imagens e das pastas do projeto aí na sua máquina, vi que tem algumas imagens com nome diferente do curso aí no HTML. Espero ter ajudado!

solução!
por Nícolas Felipe Ferreira Souza
| 2537.7k xp | 8083 posts
Instrutor Monitor de Fórum

Olá, Manuel! Como vai?

Para resolver o seu problema, primeiramente você deve retirar do seu código a primeira imagem após a tag <span>, deixando a tag <body> do seu código HTML assim:

<body>
    <header class="cabecalho">
        <div class="container">
            <span class="cabecalho__menu-hamburguer container__imagem"></span>
            <!-- Imagem foi removida daqui -->
            <img src="img/Polygon 1 (Stroke).svg" alt="triangulo laranja">
        </div>
        <div class="container">
            <a href="#"><img src="img/Favoritos (1).svg" alt="Meus Favoritos" class="container__imagem"></a>
            <a href="#"><img src="img/Compras (1).svg" alt="Sacola de compras" class="container__imagem"></a>
            <a href="#"><img src="img/Usuario (1).svg" alt="Meu Perfil" class="container__imagem"></a>
        </div>
    </header>
</body>

Além disso, você deve adicionar "background-repeat: no-repeat;" e "background-position: center;" ao elemento de classe ".cabecalho__menu-hamburguer"(que é a tag <span>). O CSS desse elemento fica assim:

.cabecalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url(../img/Menu.svg);
    background-repeat: no-repeat; /*Adicionado*/
    background-position: center; /*Adicionado*/
    display: inline-block;
}

Espero ter ajudado. Fico à disposição!

Abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Manuel Diogo Garofalo De Castro Moura
| 20.4k xp | 67 posts
Fiscal de Loja

Depois de olhar muito os dois códigos rsr finalmente consegui corrigir o erro rsrsr Muito obrigado.