Side bar tabs

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2 col-sm-push-10">
      <!-- Nav tabs -->
      <div class="nav-tabs-holder">
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Sit Lorem Tellus</a></li>
          <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Consectetur Ornare</a></li>
          <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Ipsum Porta</a></li>
          <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Nibh Egestas Amet</a></li>
        </ul>
      </div>
    </div>
    <div class="col-sm-10 col-sm-pull-2">
      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="home">
          <h2>Fusce Pharetra Ipsum</h2>
          <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur
            ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper.</p>
          <p>Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer
            posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
        </div>
       ...

CSS

body {
  background-color: #e8eae9;
}

.container-fluid {
  padding-top: 5%;
}

.nav-tabs-holder {
  position: relative;
  margin-bottom: 5%;
}

@media screen and (max-width: 767px) {
  .nav-tabs-holder:after {
    content: '';
    height: 45px;
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    z-index: 1;
    background: rgba(232, 234, 233, 0);
    background: -moz-linear-gradient(left, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(232, 234, 233, 0)), color-stop(94%, rgba(232, 234, 233, 1)), color-stop(100%, rgba(232, 234, 233, 1)));
    background: -webkit-linear-gradient(left, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
    background: -o-linear-gradient(left, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
    background: -ms-linear-gradient(left, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
    background: linear-gradient(to right, rgba(232, 234, 233, 0) 0%, rgba(232, 234, 233, 1) 94%, rgba(232, 234, 233, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e8eae9', endColorstr='#e8eae9', GradientType=1);
  }
  .nav-tabs {
    font-size: 0;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
  }
  .nav-tabs > li {
    position: relative;
    font-size: 16px;
    margin: 0;
    display: inline-block;
    float: none;
  }
  .nav-tabs > li:last-child {
    margin-right: 45px;
  }
}

.nav-tabs {
  background-color: #e8eae9;
  margin-bottom: 0;
  border: none;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.nav-tabs > li {
  text-align: center;
  margin-bottom: 0px;
}

.nav-tabs > li > a,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
  border: none;
  border-radius: 0;
  border-top: 2px solid transparent;
  background-color: #f1f1f1;
}

.nav-tabs...