position: Sticky does not work in my header

Question

Guys, I have a header that position: Sticky is not working and I don’t understand why.

HTML

<header class="header_bg">
    <div class="container">
        <div class="header">
            <div class="logo">
                <a href="#">UNEARTH</a>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Press</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
</header>

CSS

.header {
background-color: white;
padding: 40px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
position: sticky;
top: 0;}

Can anyone explain to me? Thanks in advance.

Answer 1

First, your container has no closing tag is missing a </div>

Then you put the position:sticky in the wrong element, you put in a "son" and should be in the father of all, ie in the tag <header>

Test there with that fit for you to see

body {
  height: 150vh; margin: 0;
}
.header_bg {
  position: sticky;
  top: 0;
}
.header {
  background-color: white;
  padding: 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

<header class="header_bg">
  <div class="container">
    <div class="header">
      <div class="logo">
        <a href="#">UNEARTH</a>
      </div>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Press</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>