How can i fix it? sticky navbar working only in first div

September 30, 2022

did i miss something? cause when i scroll down it doesn’t go out of div.header
i use position: sticky on to make it sticky on top but it only working in first div, when i scroll down to second div it stuck and doesn’t come out.

html, css https://codepen.io/lightmodeusers/pen/OJZvxzW.

i need you advice, thank you. 🙂

<div class="header">
  <nav>
    <a href="" class="logo"><img src="img\logo.svg" width="213" height="42"></a>
    <div class="nav-links ">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a>
          <div class="dropdown-menu">
            <ul>
              <li><a href="">Page 1</a></li>
              <li><a href="">Page 2</a></li>
              <li><a href="">Page 3</a></li>
            </ul>
          </div>
        </li>
        <li><a href="">Product</a></li>
        <li><a href="">CSR</a></li>
        <li><a href="">IS</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </nav>
  <div class="header-info">
    <h1>Welcome </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, reprehenderit?</p>
  </div>
</div>

<div class="about">
  <div class="text-about">
    <h1>About</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nisi praesentium minima omnis amet quo
      eligendi voluptatem. Aliquam quo, illo nobis vitae consectetur corporis exercitationem soluta tenetur
      natus facere. Vero?</p>
  </div>
</div>

>Solution :

This might not be the best fix, but in your code, the sticky element (navbar) is inside a container (the first div), thus the sticky will stop once the scroll has passed the container. The quickest way to fix this is to move the navbar outside the .header container if possible.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: "Poppins", sans-serif;
}

.header {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(4, 9, 30, 0.5), rgba(4, 9, 30, 0.5)), url("/img/factory1.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
  background-attachment: fixed;
}

nav {
  display: flex;
  padding: 2% 3%;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  transition: 1s ease;
  z-index: 9999;
  border: 1px solid red;
}

.nav-links {
  text-align: center;
}

.nav-links ul li {
  display: inline-block;
  position: relative;
  padding-bottom: 0.3rem;
  margin: 0.5px 16px;
}

.nav-links ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.dropdown-menu {
  display: none;
}

.about {
  height: 100vh;
  width: 100%;
  background-color: #fff;
  border: 1px solid red;
}

<nav>
  <a href="" class="logo"><img src="img\logo.svg" width="213" height="42"></a>
  <div class="nav-links ">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a>
        <div class="dropdown-menu">
          <ul>
            <li><a href="">Page 1</a></li>
            <li><a href="">Page 2</a></li>
            <li><a href="">Page 3</a></li>
          </ul>
        </div>
      </li>
      <li><a href="">Product</a></li>
      <li><a href="">CSR</a></li>
      <li><a href="">IS</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div>
</nav>
<div class="header">

  <div class="header-info">
    <h1>Welcome </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, reprehenderit?</p>
  </div>
</div>

<div class="about">
  <div class="text-about">
    <h1>About</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nisi praesentium minima omnis amet quo eligendi voluptatem. Aliquam quo, illo nobis vitae consectetur corporis exercitationem soluta tenetur natus facere. Vero?</p>
  </div>
</div>

though this causes a problem if you want the background of the navbar to be transparent. If that’s the case, you could add a negative margin top to the header element so that part of it could become the background of navbar.