CODEWITHSUNDEEP
cssnavbarsticky
Darcy
Darcy

Reputation: 1

Why won't sticky navbar scroll over divs with set height and width?

Can anyone help? I've tried to implement a sticky navbar into my website, it worked over one section however over a section where there are many divs it no longer appears. Any suggestions? Thank you for suggesting the z-index, however, this did not work either. Is there another way I could structure the divs so that I don't have this issue with the navbar disappearing? I found this resource that could be some help: https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working

<ul>
  <li><a href="#home">About</a></li>
  <li><a href="#Blog">Blog</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a class="user" href="#about">My Program</a></li>
  <li><a class="user" href="#about">Progressions</a></li>

</ul>




 <div class="float-childL" style="max-width: 50%;">
      <img src="../images/2girls_yoga.jpg" alt="Girls yoga" style="max-width: 100%;">
    </div>
    
    <div class="float-childR" style="max-width: 50%;">
          <h1>TEXT</h1>
          <p>rhrhcjhrctjbrcbhcbhrcbhecbherbhrebhjerbchjebhjrxgvrfewhbfrehfrbhrfbjkwrjkfejnefjnebjcbjcncjbcebjcebjjbbjjbjbwcbhfebhebh</p>
          <br> 
          <br> 
          <br> 
    </div>


    <div class="float-childL" style="max-width: 50%;">
          <h1> TEXT</h1>
      </div>


      <div class="float-childR" style="max-width: 50%;">
        <img src="../images/trio.jpg" alt="male pushup" 
style="max-width: 100%;">
    </div>


    <div class="float-childL" style="max-width: 50%;">
      <img src="../images/male_plank.jpg" alt="plank" 
style="max-width: 100%;">
  </div>

  <div class="float-childR" style="max-width: 50%;">
    <h1> TEXT</h1>
</div>
    
    </div>









    ul {
      position: sticky;
      position: -webkit-sticky;
      list-style-type: none;
      margin: 0;
      margin-bottom: -20px;
      padding: 0;
      overflow: hidden;
      background-color: rgb(209, 111, 46);
      top: 0;
    }
    
    li {
  float: left;
  
}

     li a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 70px;
  text-decoration: none;
  
}

    li a:hover {
  background-color: #111;
}

    .user:hover { 
  background-color: rgb(255, 211, 130);
}

body:after {     
    content: ".";     
    display: block;      
    height: 0;      
    clear: both;      
    visibility: hidden; 
}


    .float-childL {
  float: left;
  text-align: center;
  overflow-wrap: break-word;
  background-color: blanchedalmond;
  padding: 20px;
  height: 500px;
  width: 50%;
  padding-top: 50px;
  padding-bottom: 50px;
  
}  


    .float-childR {
  float: right;
  text-align: center;
  overflow-wrap: break-word;
  padding: 20px;
  background-color: blanchedalmond;
  height: 500px;
  width: 50%;
  padding-top: 50px;
  padding-bottom: 50px;
  
}

Upvotes: 0

Views: 846

Answers (1)

BerryDevDev
BerryDevDev

Reputation: 107

You should be able to fix this by adding a z-index: 2; to your sticky navbar and then adding position: relative; z-index: 1; to your floated div elements.

I'm pretty sure why this is happening is because your floated left and right divs are removed from the normal flow of the page causing them to be positioned over your sticky navbar.

Upvotes: 1

Related Questions