Fiz algumas modificações no projeto, como por exemplo, um menu responsivo, com o chamado menu "hambúrguer" , e coloquei o header, que tem a classe "cabecalho" pra ficar fixo no top, deu tudo certo, com apenas uma exceção, na section "banner", onde temos a imagem e o título, o cabeçalho fica embaixo deles.
Se eu tirasse o position relative do banner e tirasse o position absolute do titulo dele, o menu aparecia, mas o desconfigura o banner.
Como posso resolver isso, sem desconfigurar o banner?
Aqui está os códigos atuais do cabecalho:
.cabecalho {
display: flex;
flex-direction: column;
padding: 1rem 1rem 0 1rem;
position: sticky;
top: 0;
background-color: #fff;
}
E do banner:
.banner {
position: relative;
}
.banner__imagem {
background-image: url(../img/banner.jpg);
background-repeat: no-repeat;
height: 50vh;
background-size: cover;
background-position: center;
width: 100%;
}
.banner__titulo {
font-family: Pacifico, cursive;
color: var(--branco);
position: absolute;
top: 50%;
left: 50%;
text-shadow: 0 4px 4px rgba(0, 0, 0.75);
text-align: center;
transform: translate(-50%, -50%);
width: 100%;
}
O html:
<header class="cabecalho">
<div class="disposicao">
<img class="logo" src="assets/img/logo.jpg" alt="Logo do site Fruta e Fruto" />
<button class="menu__botao">☰</button>
</div>
<nav class="menu">
<ul class="menu__lista">
<li class="menu__item"><a class="menu__link active" href="#">Início</a></li>
<li class="menu__item"><a class="menu__link" href="#link-receitas">Receitas</a></li>
<li class="menu__item"><a class="menu__link" href="#link-quem-somos">Quem somos</a></li>
<li class="menu__item"><a class="menu__link" href="#">Comunidade</a></li>
</ul>
</nav>
</header>
<section class="banner">
<img class="banner__imagem" />
<h2 class="banner__titulo">
Reaproveite melhor os alimentos
</h2>
</section>