Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Position e menu fixo

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>
2 respostas
solução!

Fala Nayara! Tudo bem contigo?

Bom, eu não consegui reproduzir seu menu, só com o que você mandou aqui. Mas acho que entendi sua pergunta.

A propriedade position nos libera algumas outras propriedades quando a usamos. Top, left, bottom, right e z-index. O z-index trabalha com o eixo Z, que seria a profundidade. Imagina que sua tela tem várias camadas, quando maior o z-index, mais pra fora fica seu componente. Tenta colocar um

 z-index: 10;

no seu .cabecalho. Me diz se resolve.

Fico no aguardo e bons estudos!

Nossa, muito obrigada! Deu super certo! :D