Entrar Ainda não tem acesso?
2
respostas

Lista sumindo

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Customizando o Menu Hambúrguer

por YURY HENRIQUE MONTE PALMA
| 19.1k xp | 3 posts

Estava fazendo a lista mas ela desaparece sempre que aplico webkit.

<!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="styles/styles.css">
    <link rel="stylesheet" href="styles/reset.css">
</head>
<body>
    <header class="cabecalho">

        <div class="container">
            <input type="checkbox" id="menu" class="container__botao">
            <label for="menu">
                <span class="cabecalho__menu-hamburguer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Programação</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Frontend</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Infraestrutura</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Business</a></li>
                <li class="lista-menu__item"><a href="#" class="lista-menu__link">Design & UX</a></li>
            </ul>
            <img src="img/Logo.svg" alt="Logo da Alura Books" class="container__imagem">
        </div>
        <div class="container">
            <a href="#"><img src="img/Favoritos.svg" alt="Meus Favoritos" class="container__imagem"></a> 
            <a href="#"><img src="img/Compras.svg" alt="Carrinho de compras" class="container__imagem"></a>
            <a href="#"><img src="img/Usuário.svg" alt="Meu usuário" class="container__imagem"></a>
        </div>
    </header>
</body>
</html> ```

O css está organizado assim:

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

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

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

.container__imagem{
    padding: 1em;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
}

.container__botao:checked ~ .lista-menu {
    display: block;
}

.lista-menu__titulo, .lista-menu__item {
    padding: 1em;
    background-color: var(--branco);
}

.lista-menu__titulo {
    color: var(--laranja);
}

.lista-menu__link {
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Lista do menu hamburguer sem os itens descritos no html

2 respostas
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá Yury, tudo bem?

Pelo que entendi, você está enfrentando um problema em relação à lista do menu hamburguer, que está sumindo sempre que você aplica a propriedade webkit. Vamos analisar o código para encontrar uma solução.

Ao observar o seu código HTML e CSS, percebi que você está utilizando a propriedade display: none; na classe .lista-menu, que é a classe responsável por esconder a lista do menu hamburguer inicialmente. No entanto, quando você aplica a propriedade display: block; na classe .container__botao:checked ~ .lista-menu, que é responsável por exibir a lista quando o botão do menu hamburguer é clicado, a lista não está aparecendo.

Isso acontece porque a propriedade display: none; é mais específica do que a propriedade display: block;, fazendo com que a lista permaneça oculta mesmo após a aplicação da propriedade display: block;. Para resolver esse problema, você pode adicionar a propriedade display: none; na classe .lista-menu apenas quando o botão do menu hamburguer não estiver marcado.

Para isso, você pode utilizar a pseudo-classe :not juntamente com a pseudo-classe :checked. Dessa forma, o código ficaria assim:

.lista-menu:not(:checked) {
    display: none;
}

Com essa alteração, a lista do menu hamburguer deverá aparecer corretamente quando o botão for clicado.

Espero ter ajudado e bons estudos!

por Mateus Silva Pereira
| 53.5k xp | 1 posts

Confira também se as cores da variável que você declarou estão corretas, no meu caso eu estava com esse mesmo problema porém era só consertar na hora de declarar a variável.

:root { --cor-de-fundo: #ebecee; --branco: #ffffff; --laranja: #EB9B00; --azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%); }