VoxelKit
← Back to library
Detail pages Free

Sticky detail sidebar

Keep a listing's contact or booking sidebar pinned in view while the page scrolls.

.detail-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}
@media (max-width: 768px) {
  .detail-sidebar {
    position: static;
  }
}

Apply .detail-sidebar to the sidebar column on a single-listing page so the contact/booking box stays visible as the reader scrolls the main content, then falls back to normal flow on mobile.

Notes

  • align-self: start matters: in a flex or grid row a stretched column will not stick.
  • .detail-sidebar is a placeholder class — set it on your sidebar container in Elementor’s Advanced tab.
  • Raise top to clear a sticky site header, and keep the static fallback so it does not trap small screens.