In this layout, the page features a navbar at the top followed by a row with two columns. The left column displays the user's profile information (such as profile picture and short bio), while the right column shows other information.
However, when attempting to scroll the page, it seems like the bootstrap card below the navbar is overlapping and scrolling over it.
The desired outcome is to have the navbar and the left column remain fixed in their positions when the page is scrolled, while allowing the right column to be scrolled as normal.
Here is the given HTML structure for reference:
<nav class="navbar navbar-expand-lg navbar-light bg-cream-shade" id='bootstrap-override-navbar'>
Some nav setup
</nav>
<div class="card bg-cream">
<div class="row">
<div class="col-2">
<div class="card" id='bootstrap-override-card'>
<div>
<img src=".." alt="Generic placeholder image"/>
</div>
<div class="media">
<div class="media-body">
<h5>Chanakya Sunkarapally</h5>
</div>
</div>
<p class="card-text"><small>Some quick info about me. </small></p>
<div class="list-group list-group-flush">
<!--list of stuff-->
</div>
<div class="card-body">
Some info
</div>
</div>
</div>
<div class="col-10 bg-white">
<!--Some Content-->
</div>
</div>
</div>
Below is the CSS styles used on the page:
#bootstrap-override-card {
background: linear-gradient(to bottom, #ffffe1, #fffff4);
border: none;
padding: unset;
top: auto;
position: sticky;
}
.bg-cream{
background: #fffff4;
}
.bg-cream-shade {
background: linear-gradient(to right, #ffffe1, #fffff4);
}
#bootstrap-override-navbar {
position: sticky;
top: 0;
}
How can this desired behavior be achieved?