I've encountered an issue with my code using bootstrap. Despite setting the top position to 0, it's still not working. Any ideas on why this might be happening? Here's the code snippet:
<style>
.background-nav {
background: #58585858;
backdrop-filter: blur(45px);
border: 3px solid #808080;
}
.t-0 {
top: 0;
}
</style>
<div class="w-100">
<div class="row justify-content-around position-sticky t-0 p-0 m-0">
<div class="col-2 text-center p-2 rounded-2 position-sticky t-0 mt-3 background-nav">Home</div>
<div class="col-7 text-center p-2 rounded-2 position-sticky t-0 mt-3 background-nav">Search</div>
<div class="col-2 text-center p-2 rounded-2 position-sticky t-0 mt-3 background-nav">Music</div>
</div>
</div>
Here is the main portion of the code:
<div id="navbar"></div>
<section>
<a href="http://localhost:3000/login">login</a>
</section>
<button style="background: red; color: white" id="Shutdown">SHUTDOWN</button>
<div class="meow">.</div>
<div class="meow">....</div>
<div class="meow">....</div>
<div class="meow">....</div>
<div class="meow">....</div>
<div id="footer"></div>
The top code will be replaced with #navbar and here is the CSS for the main code:
.meow {
height: 5000px;
width: 200px;
display: block;
background: red;
}
I have attempted setting the top to 0 or changing the position to sticky with the !important tag without success.