I have a navbar inside a header which I'm trying to make sticky over the entire page. I have looked everywhere for solutions, and I have tried many things to solve my problem (no overflow, remove the flexbox, set a height on the parent, etc.), but to no avail unfortunately. There is just something I don't understand. I've added a class of .sticky to my h1, just to test it, and that works of course.
I've included my HTML and CSS in a snippet. Hopefully it is clear for everybody to understand it. Any help would be immensely appreciated!
Here's a link to the page: https://puzzi22.github.io/cambios-climaticos/index.html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
margin: 0 auto;
padding: 3rem 0 0 0;
background-color: white;
text-transform: uppercase;
font-weight: 800;
overflow-y: visible;
}
.header-flex {
display: flex;
flex-direction: column;
text-align: left;
overflow: auto;
}
.lema {
font-weight: 400;
order: -1;
margin: 0;
}
.company-name {
font-size: 3.8rem;
margin-bottom: 1rem;
line-height: 1;
}
.nav-links {
font-size: 1rem;
padding-bottom: 1rem;
line-height: 1.4;
}
.nav-links li {
display: inline-block;
margin-right: 3rem;
}
/* STICKY ELEMENT */
.sticky {
position: sticky;
top: 0;
z-index: 2;
align-self: flex-start;
}
/* SOME CONTAINERS */
.container-desktop {
width: 70%;
margin: 0 auto;
}
.container-flex {
display: flex;
gap: 10%;
align-content: center;
}
/* SOME STYLING (that shouldn't affect anything) */
ul {
list-style: none;
}
a {
text-decoration: none;
}
header a {
color: orange;
}
header a:hover {
color: rgba(0, 0, 0, 0.5);
}<header>
<div class="header-flex container-desktop">
<span class="company-name">
<a href="#">1,5 ℃</a>
</span>
<span class="lema">No hay planeta B</span>
<nav class="sticky">
<ul class="nav-links">
<li>
<a href="#">Síntomas</a>
</li>
<li>
<a href="#">Videos</a>
</li>
<li>
<a href="#">COP26</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container-desktop">
<h1 class="sticky">Beginning of MAIN</h1>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>