I'm having issues with making my navbar inside a header sticky over the whole page. Despite trying various solutions like removing overflow, adjusting the flexbox, and setting a specific height on the parent element, I still can't get it to work. Strangely, adding a class of .sticky to my h1 element works fine.
I've shared both my HTML and CSS in the code snippet below, hoping that someone can offer some assistance in understanding the problem better. Any help would be greatly appreciated!
Feel free to check out the page here:
* {
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>