I want to make a sticky side-bar

Viewed 81

I've made the sidebar, but I want the sidebar to be fixed and also have a vertical scroll bar.
This is what I want:I want the sidebar to be sticky and also have a scrollbar.

I tried this but it didn't work:

<div class="col-md-4 bg-light px-0">
                <div class="sidebar px-3">
                    <h3 class="mt-4">Rental</h3>
                    <h3 class="mt-2">from $99</h3>
                    <p class="mb-5">per night</p>
                    <form action="">
                        <p><i class="fa fa-calendar-check-o pr-1"></i>Check in</p>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="DD MM YYYY" required>
                        </div>
                        <p class=""><i class="fa fa-calendar-o pr-1"></i>Check out</p>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="DD MM YYYY" required>
                        </div>
                        <p class=""><i class="fa fa-male pr-1"></i>Adults</p>
                        <div class="form-group">
                            <input type="number" class="form-control" placeholder="1" required>
                        </div>
                        <p class=""><i class="fa fa-child pr-1"></i>Kids</p>
                        <div class="form-group">
                            <input type="number" class="form-control" placeholder="0" required>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="form-control btn btn-success w-100"><i
                                    class="fa fa-search pr-3"></i> Search availability</button>
                        </div>
                    </form>
                </div>
                <div class="hoverablediv">
                    <div class="py-3 p-3"><a href="#" class="text-decoration-none text-dark"><i
                                class="fa fa-building pr-1"></i>Apartment</a></div>
                    <div class="py-3 p-3" data-toggle="modal" data-target="#myModal"><a href="#"
                            class="text-decoration-none text-dark"><i class="fa fa-rss pr-1"></i>Subscribe</a></div>
                    <div class="py-3 p-3"><a href="#" class="text-decoration-none text-dark"><i
                                class="fa fa-envelope pr-1"></i>Contact</a></div>
                </div>
                
            </div> 
</div>
1 Answers

Assuming your body has a z-index value of 0, add

position: fixed;
overflow: auto;
z-index: 1;

or this (if you want the sidebar to always have a vertical scrollbar)

position: fixed;
overflow-y: scroll;
z-index: 1;

to your sidebar's css

Related