Looking for a way to make the header of a BS4 accordion sticky when it is opened, so that it stays at the top of the screen even when users scroll down
Current approach is not achieving the desired result:
#accordion .card-header BUTTON:not(.collapsed) {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
The header keeps overlapping the screen and remains invisible
The code being used:
<style>
#accordion .card-header BUTTON:not(.collapsed) {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
</style>
<div id="accordion" class="groups">
<div class="card">
<div class="card-header d-block d-md-none m-0 p-0">
<h2 class="mb-0">
<button
class="btn btn-link btn-block p-2"
data-toggle="collapse"
data-target="'#group-1"
aria-controls="'#group-1"
>title</button>
</h2>
</div>
<div id="group-1" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
...
</div>
</div>
</div>