I've been working on designing a website with Bootstrap 4, and I wanted to incorporate a sticky sidebar on the right side. My idea was to have two boxes - one for content and the other for the sidebar.
Everything is displaying correctly on most devices, except for mobile. On mobile, I want the sidebar to be above the content, but I'm running into issues with overlapping.
The problem lies in the fact that box 2 is overlapping box 1. I'm struggling to find a solution to this issue.
Here's the code snippet I have so far:
<style>
.content-section {
min-height: 2000px;
}
.sidebar-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.make-me-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<div class="content-section card card-body">
<div>1</div>
</div>
</div>
<div class="col-md-4 order-first order-md-last">
<div class="sidebar-item">
<div class="make-me-sticky">
<div class="card card-body">2</div>
</div>
</div>
</div>
</div>
</div>
You can view a demo of the layout here: