.navigation {
color: var(--var-color-two);
font-family: "Kanit-medium", sans-serif;
font-style: normal;
font-size: 26px;
height: 1500px;
padding-top: 42px;
padding-left: 250px;
position: sticky;
top: 0;
}
.logo {
display: inline-block;
font-size: 30px;
}
.nav-links {
position: relative;
display: inline-block;
left: 12rem;
}
.nav-item {
display: inline-block;
margin: 0 18px;
}<div id="header">
<div class="navigation">
<ul class="logo">
<li>
<a class="home" href="index.html">HOME</a>
</li>
</ul>
<ul class="nav-links">
<li class="nav-item">
<a class="ebay" href="Pages/Page1.html">Page1</a>
</li>
<li class="nav-item">
<a class="stock" href="Pages/Page2.html">Page2</a>
</li>
<li class="nav-item">
<a class="drop" href="Pages/Page3.html">Page3</a>
</li>
<li class="nav-item">
<a class="pricing" href="Pages/Page4.html">Page4</a>
</li>
</ul>
</div>
</div>I have tried making the .navigation sticky, fixed, etc. The header doesn't seem to stick on the top of the page when I scroll down. Any ideas why it isn't sticking to the top of the page even though i did everything right? I don't mind adding Java Script if it is necessary. EDIT: I have tried adding sticky and top: 0; to the #header too, it doesn't work.
The reason why it does not work is very simple, you need to apply the sticky to the #header on the structure you have, why? the sticky property depends on the overflow and the ability to scroll on the parent element, the sticky property becomes sticky when the height of the element is passed. here is a page with a more in detail explanation https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working
also a little test. I can not go in to much detail on the property on this comment, please read the page above.
body{
height: 800px;
}
#header {
color: var(--var-color-two);
font-family: "Kanit-medium", sans-serif;
font-style: normal;
font-size: 26px;
width: 100%;
height: auto;
padding-top: 42px;
padding-left: 250px;
position: sticky;
top: 0;
background-color:red;
display: flex;
}
.logo {
display: inline-block;
font-size: 30px;
}
.nav-links {
position: relative;
display: inline-block;
left: 12rem;
}
.nav-item {
display: inline-block;
margin: 0 18px;
}<div id="header">
<nav class="navigation">
<ul class="logo">
<li>
<a class="home" href="index.html">HOME</a>
</li>
</ul>
<ul class="nav-links">
<li class="nav-item">
<a class="ebay" href="Pages/Page1.html">Page1</a>
</li>
<li class="nav-item">
<a class="stock" href="Pages/Page2.html">Page2</a>
</li>
<li class="nav-item">
<a class="drop" href="Pages/Page3.html">Page3</a>
</li>
<li class="nav-item">
<a class="pricing" href="Pages/Page4.html">Page4</a>
</li>
</ul>
</nav>
</div>Please, take a look at the position: sticky CSS property.
This will help you also: https://dev.to/akhilarjun/one-line-sticky-header-using-css-5gp3
Hope my answer will help you!