Kevin Powell - Community•15mo ago

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

elhananOP•15mo 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.

Gaming

Programming

Position sticky on UL element