![](imagem menu hamburguer ) 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.
![](imagem menu hamburguer ) 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.
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!