How to create a sticky left sidebar menu using bootstrap 3

Question

With the help of proper code can you tell me How to create a sticky left sidebar menu using bootstrap 3?

Answer 1

To create a sticky left sidebar that stays fixed while scrolling the main content, follow these steps:

HTML Structure

<div class="container-fluid">

  <div class="row">

    <!-- Left Sidebar -->

    <div class="col-sm-3 col-md-2 sidebar">

      <ul class="nav nav-sidebar">

        <li class="active"><a href="#">Menu 1</a></li>

        <li><a href="#">Menu 2</a></li>

        <li><a href="#">Menu 3</a></li>

        <li><a href="#">Menu 4</a></li>

      </ul>

    </div>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

      <!-- Your content here -->

    </div>

  </div>

</div>


CSS Styling

.sidebar {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  z-index: 1000;

  display: block;

  padding: 20px;

  overflow-x: hidden;

  overflow-y: auto; /* Scrollable contents if viewport is shorter than content */

  background-color: #f5f5f5;

  border-right: 1px solid #eee;

}


.main {

  padding: 20px;

}


.nav-sidebar {

  margin-right: -21px; /* 20px padding + 1px border */

  margin-bottom: 20px;

  margin-left: -20px;

}

.nav-sidebar > li > a {

  padding-right: 20px;

  padding-left: 20px;

}

.nav-sidebar > .active > a,

.nav-sidebar > .active > a:hover,

.nav-sidebar > .active > a:focus {

  color: #fff;

  background-color: #428bca;

}