Make Sticky Sidebar

  • I’ve used some code to create a sticky sidebar, but it doesn’t work

    This code is one of them:

    @media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

    I even disabled the cache plugin. Still not working

    What do I have to do?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • ying

    (@yingscarlett)

    Hi there,

    It’s not a theme-related question but a CSS question.

    There’re several reasons that the sticky is not working.

    Please refer to this article:
    https://university.webflow.com/lesson/create-a-sticky-sidebar

    1. You have this CSS that stops stickyfrom working.

    html, body {
    overflow-x: hidden;
}

    You’ll need to remove it.

    2. You’ll need to add this CSS:

    div#content {
    display: flex;
}

    and change your current CSS to this:

    @media (min-width: 769px) {
#right-sidebar .inside-right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}
}

    Let me know if this helps ??

    Thread Starter Fixioner

    (@fixioner)

    If I don’t use that code, my homepage will widen. However, I will try first

    Thread Starter Fixioner

    (@fixioner)

    the code is not working. I’ve tried removing overflow-x: hidden; and added the code display: flex;, however it makes my content sideways.

    lihat ini

    ying

    (@yingscarlett)

    As you can see here in the video, the CSS should work:
    https://www.screencast.com/t/b0nC6lwn5VR

    If you have any cache plugin running, make sure to clear cache after changes are made, also clear your browser cache.

    When you add/remove CSS, make sure the CSS format is correct.

    Let me know ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Make Sticky Sidebar’ is closed to new replies.