1
resposta

[Bug] O menu não abre ao clicar em "Categorias"

Olá, preciso de ajuda, pois fiz a lista do menu Categorias conforme a instrutora exemplificou, porém o menu não abre. Tentei várias formas, mas não encontrei o que fiz de errado. Segue os códigos para melhor vislumbre:

Imdex:

<ul class="opcoes">
            <input type="checkbox" id="opcoes_menu" class="opcoes_botão">
            <label for="opcoes_menu">
                <li class="opcoes_item">Categorias</li>
            </label>
            <ul class="lista-menu">
                <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">Front-end</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>
            <li class="opcoes_item"><a href="#" class="opcoes_link">Favoritos</a></li>
            <li class="opcoes_item"><a href="#" class="opcoes_link">Minha Estante</a></li>
        </ul>

CSS:

@media screen and (min-width: 1024px) {

    .cabecalho {
        justify-content: space-between;
        position: static;

    }

    .container_titulo,
    .container_titulo-negrito {
        font-family: var(--fonte-secundaria);
        font-size: 30px;
    }

    .container_titulo {
        font-weight: 400;
        display: block;
    }

    .container_titulo-negrito {
        font-weight: 700;
    }

    .opcoes {
        display: flex;
    }

    .opcoes_item {
        padding: 0 1em;
        text-transform: uppercase;
    }

    .opcoes_link {
        text-decoration: none;
        color: var(--preto);
    }

    .container_imagem-transparente {
        display: none;
    }

    .cabecalho_menu-hamburguer {
        display: none;
    }

    .opcoes_botão:checked ~ .lista-menu {
        display: block;
    }
}

Se alguém conseguir me ajudar, fico grato desde já.

1 resposta

Fala ai Renan, tudo bem?

Esse CSS é toda estilização que você tem no seu arquivo header.css? Pelo que estava vendo no projeto do GitHub do curso era pra ter mais estilizações antes do @media screen and (min-width: 1024px).

Caso tenha mais estilizações no seu arquivo, mande aqui no fórum para darmos uma olhada.