Why position sticky is not working on my nav?

Question

I have tried to add position sticky to my nav class "header__div-nav" but it does not seem to work. I have tried adding, display initial to the parent as other posts suggested, but with no results.

Right now this is behaving as static instead of sticky.

body {
  font-family: "New Tegomin", serif;
  background-color: #ddd;
  margin-bottom: 5vh;
}

figcaption {
  display: none;
}

.header__div-nav {
  box-shadow: 0 4px 2px -2px gray;
  background-color: white;
  position: sticky;
  top: 0; /* required */
  width: 100%;
  z-index: 999;
}
.navbar__ul {
  margin: 0;
  padding: 0;
  height: 20vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.navbar__ul * {
  padding: 0 2vw;
  list-style-type: none;
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mac Miller</title>
  </head>
  <body>
    <header id="header">
      <div class="header__div-nav">
        <nav id="navbar">
          <ul class="navbar__ul">
            <li><a href="#tribute-info">About</a></li>
            <li><a href="#albums">Albums</a></li>
            <li><a href="#pics">Cool Pics</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="main">
      <div class="main__title_container">
        <h1 id="title">Mac Miller</h1>
      </div>
        <h2>About</h2>
        <p>
          Malcolm James McCormick (January 19, 1992 – September 7, 2018), known
          professionally as Mac Miller, was an American rapper, singer,
          songwriter, and record producer from Pittsburgh, Pennsylvania.
        </p>
    </main>
  </body>
</html>

Let me edit the post to demonstrate, stack overflow doesn't allow to post all my code :( — Alejandro Sánchez, Aug 18 '21 at 16:51

score 2 · Accepted Answer · answered Aug 18 '21 at 16:52

when an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick. Instead of .header__div-nav please add position: sticky to your header

#header {
  position: sticky;
  top: 0;
}

Why position sticky is not working on my nav?

1 Answers1