Ao clicar no menu hambúrguer percebi que o menu de navegação fica embaixo do carrossel, gostaria de saber como resolver isso
Meu HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<link rel="stylesheet" href="style.css">
<title>AluraBooks</title>
</head>
<body>
<header>
<div class="cabecalho">
<div class="cabecalho__container cabecalho__container--menu">
<div class="container__menu--hamburger menu--hamburger">
<input type="checkbox" id="checkbox--menu">
<label for="checkbox--menu">
<span></span>
<span></span>
<span></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">busines</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">design & ux</a>
</li>
</ul>
</div>
<img class="cabecalho__container--imagem" src="img/Logo.svg" alt="LOGO">
</div>
<div class="cabecalho__container">
<img class="container__imagem" src="img/Favoritos.svg" alt="FAVORITOS">
<img class="container__imagem" src="img/Compras.svg" alt="SACOLA">
<img class="container__imagem" src="img/Usuário.svg" alt="USUÁRIO">
</div>
</div>
</header>
<main class="principal">
<section class="banner-topo banner">
<h2 class="banner-topo__titulo">Já sabe por onde começar?</h2>
<p class="banner-topo__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
<input type="search" placeholder="Qual será sua próxima leitura?" class="container-busca">
</section>
<section class="carrossel-lancamento carrossel">
<h2 class="carrossel__titulo">Últimos Lançamentos</h2>
<div class="swiper">
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro ApacheKafka"></div>
<div class="swiper-slide"><img src="img/Arquitetura.svg" alt="Livro Arquitetura"></div>
<div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro Javascript"></div>
<div class="swiper-slide"><img src="img/Nodejs.svg" alt="Livro Nodesj"></div>
<div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro Portugol"></div>
<div class="swiper-slide"><img src="img/Tuning.svg" alt="Livro Tuning"></div>
</div>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="carrossel.js"></script>
</body>
</html>js do carrossel
const swiper = new Swiper('.swiper', {
slidesPerView: 3,
spaceBetween: 15,
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
}
});carrossel.css
.carrossel__titulo {
color: var(--amarelo-destaque);
background-color: white;
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1em;
}
.swiper-pagination {
position: initial;
padding: 0.5em 0;
}
.swiper-slide img {
width: 100%;
}