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 >
<span >
<a href="#">1,5 ℃</a>
</span>
<span >No hay planeta B</span>
<nav >
<ul >
<li>
<a href="#">Síntomas</a>
</li>
<li>
<a href="#">Videos</a>
</li>
<li>
<a href="#">COP26</a>
</li>
</ul>
</nav>
</div>
</header>
<main >
<h1 >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>CodePudding user response：
I feel your pain. I dealt with this same frustrating issue not long ago. I found that it's because I had my sticky element within another div. So it's not allowed to stick to the top of the page. I pulled your navbar out of the div tag and it works as intended.
* {
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 >
<span >
<a href="#">1,5 ℃</a>
</span>
<span >No hay planeta B</span>
</div>
</header>
<nav >
<ul >
<li>
<a href="#">Síntomas</a>
</li>
<li>
<a href="#">Videos</a>
</li>
<li>
<a href="#">COP26</a>
</li>
</ul>
</nav>
<main >
<h1 >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>CodePudding user response：
Is this what you were going for? I just put the sticky class on the header element.
* {
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 >
<span >
<a href="#">1,5 ℃</a>
</span>
<span >No hay planeta B</span>
<nav >
<ul >
<li>
<a href="#">Síntomas</a>
</li>
<li>
<a href="#">Videos</a>
</li>
<li>
<a href="#">COP26</a>
</li>
</ul>
</nav>
</div>
</header>
<main >
<h1>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>