[Resolved] Making a sidebar sticky

[Hasan]

Hi!

I am trying to make the sidebar sticky for desktop only with the below code, but it is not working. Please help fixing it.

@media (min-width: 800px) {
  #tour-sidebar {
      position: -webkit-sticky;
      position: sticky;
      top: 100px;
  }
}

Thanks!

[David]

Hi there,

add this CSS:

.inside-right-sidebar {
    height: 100%;
}

[Hasan]

Worked perfectly. Thanks, David!

I have another issue now since it is making only the first part of the sidebar sticky and the other part is scrolling past it. How can I make the whole sidebar sticky in general? If I apply the code for #ride-sidebar ID, it does not work.

[David]

Remove the CSS i provided.
And then change your CSS to:

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

[Hasan]

Awesome! Thanks a lot!! 🙂

[David]

You’re welcome

[Author]

Posts