I want to make the navigation bar sticky

Question

I want to make this navbar sticky, after applying the below css it behaves like sticky for one page but when I scroll more it goes up and don't behave like sticky. Please help me to fix this.

Sticky navbar works scrolling till header content but after scrolling beyond header it goes up and hide.

    #header {
      width: 100%;
      height: 100vh;
      background-image: url(/img/pp-desktop.png);
      background-size: cover;
      background-position: center;
    }

    .container {
      padding: 10px 10%;
    }

    .logo {
      width: 80px;
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
/* From here I added CSS for sticky behaviour....*/
      align-self: flex-start;
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      z-index: 1;
    }

    nav ul li {
      display: inline-block;
      list-style: none;
      margin: 10px 20px;
    }


Sticky navbar works scrolling till header content but after scrolling beyond header it goes up and hide.

<div id="header">
    <div class="container">

        <nav>
            <img src="/img/logo.png" class="logo" alt="" />
            <ul id="sidemenu">
                <li><a href="#header">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
                <i class="fa-solid fa-square-xmark" onclick="closeMenu()"></i>
            </ul>
            <i class="fa-solid fa-bars" onclick="openMenu()"></i>
        </nav>

        <div class="header-text">
            <p>Software Developer</p>
            <h1>Hi, I am <span>xyz</span> </br> from India</h1>
        </div>

    </div>
</div>



<div id="about">

    <div class="container">

        <div class="row">
            <div class="about-col-1">
                <img src="/img/me.png" alt="">
            </div>
            <div class="about-col-2">
                <h1 class="sub-title">About Me</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam
                    aspernatur earum tempora, adipisci consequatur ea temporibus quidem animi excepturi
                    est assumenda, eius debitis et deleniti accusamus reprehenderit deserunt labore!
                    Repellendus magnam cumque commodi corporis cum vel architecto sed. Quam laudantium
                    possimus doloribus cumque voluptatum placeat vero aut non libero a?</p>
                <div class="tab-titles">
                    <p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
                    <p class="tab-links" onclick="opentab('experience')">Experience</p>
                    <p class="tab-links" onclick="opentab('education')">Education</p>
                </div>

                <div class="tab-contents active-tab" id="skills">
                    <ul>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                        <li><span>Software Dev</span></br>Fullstack Developer</li>
                    </ul>
                </div>

                <div class="tab-contents" id="experience">
                    <ul>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2020 - 2021</span></br>Fullstack Developer</li>
                    </ul>
                </div>

                <div class="tab-contents" id="education">
                    <ul>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2021 - 2022</span></br>Fullstack Developer</li>
                        <li><span>2020 - 2021</span></br>Fullstack Developer</li>
                    </ul>
                </div>

            </div>
        </div>

    </div>

</div>

Answer 1

So, you might be confused between the use case of sticky and fixed.

• fixed position content never leaves the viewport and it is always visible
• sticky position context leaves the viewport when the parent is scrolled out of the viewport.

Hence, .header is scrolled out of view and the nav goes away with it.

In your case:

nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      align-self: flex-start;
      position: fixed;
      top: 0;
      z-index: 1;
    }

This should fix the issue. If you want multiple headers for each container, you may use sticky. I hope this helps!