Seeking assistance from anyone knowledgeable, as I am facing an issue with implementing a sticky navbar on my website. It functions properly over one section, but when there are multiple divs in another section, it no longer remains visible. Any recommendations or alternative solutions to prevent the navbar from disappearing? Despite trying the z-index suggestion, it did not resolve the problem. Is there a different approach to structuring the divs that could help avoid this issue? I came across a helpful resource that might provide some insights:
<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;
}