Menu hamburger | HTML e CSS: responsividade com mobile-first

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Blayner Melo

| 51.1k xp | 31 posts

meu campo fica diferente do da aula, aparece esse retângulo e depois do imput, criação das listas e estilização posso clicar em qualquer lugar que a lista não aparece mais Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Código css

.cabecalho__menu-hamburger{ width: 24px; height: 24px; 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; }

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

.container__imagem{ padding: 1em; }

.lista-menu{ display: none; }

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

Códiho html

2 respostas

por Davi da Silva dos Santos

| 81.4k xp | 5 posts

FULL STACK DEVELOPER

19/04/2023

Bom dia Blayner

Na criação do seu input no HTML, você deve inserir qual é o tipo dessa tag, nesse caso seria checkbox

 <input type="checkbox" id="menu" class="container__botao" />
        <label for="menu">
          <span
            class="cabecalho_menu-hamburguer container__imagem transparente"
          ></span>
        </label>

Tipando ele o CSS consegue interagir com ele de maneira correta

solução!

por Blayner Melo

| 51.1k xp | 31 posts

19/04/2023

Tinha feito isso, mas descobri o erro

eu tinha copiado essa linha do código e colado invés de digitar certinho. Por algum motivo não leu a instrução