Stop my side nav bar from scrolling into my main nav when scrolling through the page-CodePudding

I have two elements that i want to be sticky my nav bar at the top and a side nave bar. When ever i scroll down the page my side nav bar goes up and into my nav bar. https://imgur.com/a/k39Cruu. I would like to get my nav bar to scroll down with the page while also having my side bar scroll down but not go into my nav bar.

https://prod.liveshare.vsengsaas.visualstudio.com/join?E54AB60203B903B84F7B99C3978743CD838A

HTML

 <div >
<div >
  <header>

    <ul >

      <li ><a href="#" target="_blank">Home</a></li>
      <li ><a href="#" target="_blank">About</a></li>
      <li ><a href="#" target="_blank">Gallery</a></li>
      <li ><a href="#" target="_blank">Calendar</a></li>
      <li ><a href="#" target="_blank">Contact</a></li>

    </ul>
    </nav>

            <nav >
<a  href="https://facebook.com"><i  aria-hidden="true"></i></a>
      <a  href="https://twitter.com"><i  aria-hidden="true"></i></a>
      <a  href="https://instagram.com"><i  aria-hidden="true"></i></a>
    </nav>
  </header>
</div>

  <main>
    <nav >
      <ul >
        <li>FENNEC FOX</li>
        <hr>
        <li>LLAMA</li>
        <hr>
        <li>MANED WOLF</li>
        <hr>
        <li>PANGOLIN</li>
        <hr>
        <li>PYGMY MARMOSET</li>
        <hr>
        <li>RED PANDA</li>
        <hr>
      </ul>
    </nav>

CSS

     .main-background {  
    display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 30px 30px; 

}

.link1{

    margin-top: 90px;


}

.link2{

    margin-top: 32px;

}

.link3{

    margin-top: 71px;
}



.link6{

    margin-top: 54px;
}

.bottom-nav{
   width: auto;
}

.animal-nav{
float: right;
margin: 10px;
height: 270vh;
background-color: white;




}



.gray-box{

position: sticky;
top: 0px;
background-color: lightgray;
padding: 10px;

}



.sticky-div{
position: sticky;
top: 0;
}



}

CodePudding user response：

change position to fixed and try it you

CodePudding user response：

Maybe you can try this. I noticed some of your html are off so I reposition it where it belongs. Let me know if this will works for you. Take a look at it in full screen.

.main-background {  
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  grid-gap: 30px 30px; 

}

.link1{
    margin-top: 90px;
}

.link2{
    margin-top: 32px;
}

.link3{
    margin-top: 71px;
}

.link6{
    margin-top: 54px;
}

.bottom-nav{
   width: auto;
}

.animal-nav{
float: right;
margin: 10px;
height: 270vh;
background-color: white;

}

.gray-box{
position: sticky;
top: 0;
background-color: lightgray;
padding: 10px;
}


.sticky-div{
position: fixed;
top: 0;

}

<div >
<div > 
  <header>

    <ul >

      <li ><a href="#" target="_blank">Home</a></li>
      <li ><a href="#" target="_blank">About</a></li>
      <li ><a href="#" target="_blank">Gallery</a></li>
      <li ><a href="#" target="_blank">Calendar</a></li>
      <li ><a href="#" target="_blank">Contact</a></li>

    </ul>
   

            <nav >
<a  href="https://facebook.com"><i  aria-hidden="true"></i></a>
      <a  href="https://twitter.com"><i  aria-hidden="true"></i></a>
      <a  href="https://instagram.com"><i  aria-hidden="true"></i></a>
    </nav>
  </header>
</div>
  <main>
    <nav >
      <ul >
        <li>FENNEC FOX</li>
        <hr>
        <li>LLAMA</li>
        <hr>
        <li>MANED WOLF</li>
        <hr>
        <li>PANGOLIN</li>
        <hr>
        <li>PYGMY MARMOSET</li>
        <hr>
        <li>RED PANDA</li>
        <hr>
      </ul>
    </nav>

CodePudding user response：

Replace this style

.animal-nav{
float: right;
margin: 10px;
height: 270vh;
position:fixed;
right:20px;
top:100px;
background-color: white;
}