1
resposta

[Bug] erro no menu hamburguer

![](imagem menu hamburguerInsira aqui a descrição dessa imagem para ajudar na acessibilidade ) alguém consegue me ajudar? meu menu hamburguer quebra em determinado momento, acho que em algum trecho do header tem algum erro mas nao consegui identificar.

1 resposta

Olá, João! Tudo bom com você?

Vou deixar aqui meu código pra você dar uma olhada e fazer um comparativo com o seu e tentar encontrar o problema:

<div class="container">

            <input type="checkbox" id="menu" class="container__button">
            <label for="menu" class="container__label">
                
                <span class="header__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">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>    
            <img src="img/Logo.svg" alt="Logo da AluraBooks" class="container__imagem">
            <h1 class="container__titulo"><b class="container__titulo_negrito">Alura</b>Books</h1>

        </div>
.header{
    display: flex;
    position: relative;
    background-color: var(--branco);
    justify-content: space-between;
    align-items: center;
}

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

.container__imagem{
    padding: 1em;
}

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

.container__button:checked ~ .container__label > .header__menu_hamburguer{
    background: url(../img/Menu_Marcado.svg) no-repeat center;
}

.container__button:checked ~ .container__label{
    background: var(--azul_degrade);
}

.lista__menu{
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
}

.container__button:checked~.lista__menu{
    display: block;
}

.container__button{
    display: none;
}

.lista__menu_titulo, .lista__menu_item{
    background: var(--branco);
    padding: 1em;
}

.lista__menu_titulo{
    color: var(--laranja);
    font-weight: 700;
}

.lista__menu_link{
    background: var(--azul_degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

.container__titulo, .container__texto, .options{
    display: none;
}

Mas depois envia seu código também, que assim a gente consegue dar uma olhada e ver pode ser o erro.

Espero ter ajudado, bons estudos e abraços!