how to using navbar and div tag as fixed

Question

I wanted to build a website from scratch, I started adding nav bar which seems to work fine and after that I added a few div tags as "fixed".

I need it to be in such a way that when I scroll the nav bar should be fixed and the rest of the content to be scrolled...

I have attached the project below

Answer 1

I think i have a solution for your problem. In your project #navber element overlap the section element when you going to set position:fixed .Now if you set any positive value of z-index for section, then it overlaps navbar element You just have to set one property...

section{
position:fixed;
z-index:1;
}

Fixed elements are those elements which removed from the flow of document. Without any z-index value elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). but now section element overlaps navbar.set property for navbar as follow

#navbar{
margin-top:50px;
}

Answer 2

From what you are describing I think I have a solution.

In your nav bar you need to put <nav style="position: fixed; top: 0;">CONTENT</nav>

This will make it never move and be stuck at the top bottom: 0; will make it stick on the bottom

Update: Change your code to this:

<section class="color-1">
    <nav style="position: fixed; top: 0;">
        <a href="#cl-effect-14">Ailurophile</a>
        <a href="#cl-effect-14">Sumptuous</a>
        <a href="#cl-effect-14">Scintilla</a>
        <a href="#cl-effect-14">Propinquity</a>
        <a href="#cl-effect-14">Harbinger</a>
    </nav>
</section>