.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.