Position sticky on UL element

Hello friends I tried to follow Kevin's short video (https://www.youtube.com/shorts/39rbYbVhb0Y?feature=share) about position sticky in my case it is not working: here is my html
<main class="ds-flex">
<aside class="ds-flex" style="align-items: start; border: 1px solid blue;">
<div style="position: sticky; top: 2em;">
<img src="img/muday_logo.svg" alt="logo">
</div>
<nav style="position: sticky; top: 0;">
<ul class="" style="position: sticky">
<li style="position: sticky; top: 0;"><a class="nav-list-link-active" href="/dashboard">Link 1</a></li>
<li ><a class="nav-link" href="/sms">Link 1</a></li>
<li><a class="nav-link" href="/smpp" style="position: sticky; top: 0;">Link 1</a> </li>
<li><a class="nav-link" href="/subscription">Link 1</a></li>
<li><a class="nav-link" href="/whitelist">Link 1</a></li>
<li><a class="nav-link" href="/report">Link 1</a></li>
<li><a class="nav-link" href="/setting">Link 1</a></li>
</ul>
</nav>
</aside>
<div>
<slot />
</div>
</main>
<main class="ds-flex">
<aside class="ds-flex" style="align-items: start; border: 1px solid blue;">
<div style="position: sticky; top: 2em;">
<img src="img/muday_logo.svg" alt="logo">
</div>
<nav style="position: sticky; top: 0;">
<ul class="" style="position: sticky">
<li style="position: sticky; top: 0;"><a class="nav-list-link-active" href="/dashboard">Link 1</a></li>
<li ><a class="nav-link" href="/sms">Link 1</a></li>
<li><a class="nav-link" href="/smpp" style="position: sticky; top: 0;">Link 1</a> </li>
<li><a class="nav-link" href="/subscription">Link 1</a></li>
<li><a class="nav-link" href="/whitelist">Link 1</a></li>
<li><a class="nav-link" href="/report">Link 1</a></li>
<li><a class="nav-link" href="/setting">Link 1</a></li>
</ul>
</nav>
</aside>
<div>
<slot />
</div>
</main>
I have tried that in all possible elements but only the first div with image as child element is working.
Kevin Powell
YouTube
When position sticky doesn't stick
Sometimes position sticky doesn't stick, so let's see why it doesn't and how we can fix it!
1 Reply
elhanan
elhanan14mo ago
Ok I set top property ot some percentage and it worked, but I wanted display flex take care of the gap instead of assigning top or bottom property to the element but it is not working that way.
Want results from more Discord servers?
Add your server