when i scroll until the vision mission section the sticky doesn’t work.
i need help, the body has more containers too.
I tried different positions and i couldn’t make that works. i don’t know how can i fix it 🙁
all containers are inside the body
Part of my CSS:
``` header {
position: sticky;
top: 0;
z-index: 999;
}
.container {
width: 100%;
height: 80px;
background-color: #CFBBC0;
display: flex;
align-items: center;
box-sizing: border-box;
}
nav {
padding: 0 17rem;
display: flex;
align-items: center;
justify-content: space-between;
}
nav li {
list-style-type: none;
padding: 0;
}
.visionymision {
margin: 60px 0;
background-color: #CFBBC0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center; } ```
Part of my html:
<div class="banner">
</div>
<header>
<div class="container">
<figure class="logo">
<a href="#inicio">
<img src="/imagenes/Texto del párrafo (1).png" alt="logo"> </a>
</figure>
<nav>
<li><a href="#quiensoy">¿Quién soy?</a></li>
<li><a href="#clases">Clases</a></li>
<li><a href="#contacto">Contacto</a></li>
</nav>
</div>
</header>
<div class=visionymision>
<img src="imagenes/Euge-347.png" alt="">
<div class="textov">
<p>lorem </p>
<p>
lorem
</div>
</div>
New contributor
Eugenia Marión is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.