CODEWITHSUNDEEP
htmlcss
Eli Himself
Eli Himself

Reputation: 904

Why is the header not sticking to the top with position absolute?

Why is the nav not sticking to the top when i'm scrolling down the page? This method used to work all the time for me whats wrong now? Is there something i am missing here?

Im doing another project with code just the same and it seems to work just fine like this...

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <header></header>
    <nav>

      <ul>

        <li><a href="">Section 1</a></li>
        <li><a href="">Section 2</a></li>
        <li><a href="">Section 3</a></li>

      </ul>

    </nav>

  <div id="content">

    <div id="section_1">Section 1</div>
    <div id="section_2">Section 2</div>
    <div id="section_3">Section 3</div>

  </div>

  <footer></footer>

</body>
</html>

SASS

*
  margin: 0

nav
  position: absolute
  top: 0
  width: 100%
  z-index: 1
  background-color: brown
  padding: 40px
  li
    display: inline-block
    a
      color: white
      font-size: 1.5em
      padding: 10px
      &:hover
        color: tomato

#content
  padding-top: 80px

#section_1
  background-color: grey
  color: white
  height: 500px

#section_2
  background-color: lightgrey
  color: white
  height: 500px

#section_3
  background-color: grey
  color: white
  height: 500px

footer
  background-color: tomato
  height: 140px
  width: 100%

Upvotes: 1

Views: 1111

Answers (2)

m4n0
m4n0

Reputation: 32275

You need to use position: fixed for nav which will place it relative to the window/view port and sticks to the top while scrolling down.

position: absolute will only place it relative to the parent container which has position: relative or body if no element found with that property.

Codepen Demo

Modified Output:

* {
  margin: 0;
}
nav {
  position: fixed; /* Modify */
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: brown;
  padding: 40px;
}
nav li {
  display: inline-block;
}
nav li a {
  color: white;
  font-size: 1.5em;
  padding: 10px;
}
nav li a:hover {
  color: tomato;
}
#content {
  padding-top: 80px;
}
#section_1 {
  background-color: grey;
  color: white;
  height: 500px;
}
#section_2 {
  background-color: lightgrey;
  color: white;
  height: 500px;
}
#section_3 {
  background-color: grey;
  color: white;
  height: 500px;
}
footer {
  background-color: tomato;
  height: 140px;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <header></header>
  <nav>

    <ul>

      <li><a href="">Section 1</a>
      </li>
      <li><a href="">Section 2</a>
      </li>
      <li><a href="">Section 3</a>
      </li>

    </ul>

  </nav>

  <div id="content">

    <div id="section_1">Section 1</div>
    <div id="section_2">Section 2</div>
    <div id="section_3">Section 3</div>

  </div>

  <footer></footer>

</body>

</html>

Upvotes: 2

LcSalazar
LcSalazar

Reputation: 16841

"sticking to the top" indicates that you need to set the nav as a position:fixed not position:absolute;

Upvotes: 0

Related Questions