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

[Dúvida] Menu hamburguer pela metade

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

por Nicole Sadako de Souza Nishikawa
| 11.7k xp | 5 posts

Li vários comentários sobre o menu hamburguer e não encontrei nenhuma solução certeira. O meu menu aparece cortado e não sei o porque.

Projeto com o menu hamburguer pela metade

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="styles.css">  
</head>
<body>
    <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.svg" alt="Meus favoritos"></a>
        <a href="#"><img src="img/Compras.svg" alt="Carrinhos de compras"></a>
        <a href="#"><img src="img/Usuário.svg" alt="Meu perfil"></a>

    </header>
</body>
</html>

header.css

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

styles.css

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

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

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

e aqui está as pastas
Arquivos do projeto

1 resposta
solução!
por Rafaela Petelin Silvério
| 1950.5k xp | 4468 posts
Alura Scuba Team

Oi, Nicole! Como vai?

O problema aqui é a combinação de 3 pontos importantes no seu código:

  1. no styles.css você usou .body, mas o seletor correto é body;
  2. no header ainda falta organizar os itens com flex;
  3. no ícone do menu vale definir background-repeat, background-position e, se quiser, evitar classes com acento.

Veja este exemplo:

<!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="styles.css">
</head>
<body>
    <header 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="Meus favoritos"></a>
        <a href="#"><img src="img/Compras.svg" alt="Carrinho de compras"></a>
        <a href="#"><img src="img/Usuario.svg" alt="Meu perfil"></a>
    </header>
</body>
</html>
@import url("styles/header.css");

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

body {
    background-color: var(--cor-de-fundo);
}
.cabecalho {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: white;
}

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

O que esse código faz:

  • display: flex organiza os itens do header lado a lado;
  • align-items: center centraliza verticalmente;
  • padding cria espaço interno para o ícone não ficar "grudado";
  • background-size: contain ajuda o SVG a caber dentro da área do span;
  • trocar .body por body aplica o fundo corretamente na página.

Se quiser testar de forma rápida, faça este ajuste no seu header.css primeiro:

.cabecalho {
    display: flex;
    align-items: center;
    padding: 1rem;
}

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

Dica extra: usar nomes sem acento, como cabecalho, costuma evitar comportamento estranho e facilita a manutenção do código.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA