Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
1 reply
elhanan

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>


I have tried that in all possible elements but only the first div with image as child element is working.
YouTubeKevin Powell
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!
When position sticky doesn't stick
Was this page helpful?