Why does my header not stick to the top of my page-CodePudding

.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 >
    <ul >
      <li>
        <a  href="index.html">HOME</a>
      </li>
    </ul>

    <ul >
      <li >
        <a  href="Pages/Page1.html">Page1</a>
      </li>
      <li >
        <a  href="Pages/Page2.html">Page2</a>
      </li>
      <li >
        <a  href="Pages/Page3.html">Page3</a>
      </li>
      <li >
        <a  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.

CodePudding user response：

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 >
    <ul >
      <li>
        <a  href="index.html">HOME</a>
      </li>
    </ul>

    <ul >
      <li >
        <a  href="Pages/Page1.html">Page1</a>
      </li>
      <li >
        <a  href="Pages/Page2.html">Page2</a>
      </li>
      <li >
        <a  href="Pages/Page3.html">Page3</a>
      </li>
      <li >
        <a  href="Pages/Page4.html">Page4</a>
      </li>
    </ul>
  </nav>
</div>

CodePudding user response：

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!