CODEWITHSUNDEEP
htmlcss
confusedcoder
confusedcoder

Reputation: 99

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

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://i.sstatic.net/aeSSG.jpg. 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 class="sticky-div">
<div class="top-nav">
  <header>

    <ul class="darkgray-box">

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

    </ul>
    </nav>

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

  <main>
    <nav class="animal-nav">
      <ul class="gray-box">
        <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;
}



}

Upvotes: 0

Views: 660

Answers (3)

Arta Gbn
Arta Gbn

Reputation: 93

Replace this style

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

Upvotes: 0

Crystal
Crystal

Reputation: 1992

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 class="top-nav">
<div class="sticky-div"> 
  <header>

    <ul class="darkgray-box">

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

    </ul>
   

            <nav class="social-nav">
<a class="facebook" href="https://facebook.com"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
      <a class="twitter" href="https://twitter.com"><i class="fa fa-twitter" aria-hidden="true"></i></a>
      <a class="instagram" href="https://instagram.com"><i class="fa fa-instagram" aria-hidden="true"></i></a>
    </nav>
  </header>
</div>
  <main>
    <nav class="animal-nav">
      <ul class="gray-box">
        <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>

Upvotes: 1

Thanish Reddy M.
Thanish Reddy M.

Reputation: 1

change position to fixed and try it you

Upvotes: 0

Related Questions