Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Checkbox desativa junto com categorias quando coloco Display: none;

O checkbox com o menu de tablet desativa com o comando Display: none; , e não consigo abrir a lista categorias

4 respostas

Código:

<ul class="opcoes">
            <input type="checkbox" id="opcoes-menu" class="opcoes__botao">
            <label for="opcoes-menu"></label>
            <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:

.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__botao:checked~.lista-menu {
       display: block;
       width: auto;
       background-color: var(--branco);
   }

   .opcoes__botao {
       display: block;
   }

Olá, Fillipe! Tudo bem?

Agradeço por compartilhar o trecho do código HTML e CSS. Mas com base no código fornecido, não identifiquei nenhum erro aparente. No entanto, seria útil se você pudesse compartilhar o código completo do <header> e também o código completo do arquivo header.css. Dessa forma, poderei fornecer uma assistência mais precisa e detalhada.

Estou aqui para ajudar no que for necessário, fico no aguardo e a disposição.

Um grande abraço e até mais!

solução!

Boa noite Fillipe, baseado no código acima consegui identificar

        <ul class="opcoes">
        <input type="checkbox" id="opcoes-menu" class="opcoes__botao">
        <label for="opcoes-menu">
        </label>
        <li class="opcoes__item">Categorias</li>
        </label>

O elemento "label" foi fechado antes de cobrir o item Categorias, oque provavelmente pode ter comprometido a identificação de que o item é pra ser o acionador do botão

Boa noite! Não tinha notado que tinha um outro </label> ao lado do <label for="opcoes-menu">. Obrigado pela ajuda!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software