Patternfly Vertical Nav

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.15.1/css/patternfly-additions.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.15.1/css/patternfly.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.15.1/js/patternfly.min.js"></script>
<nav class="navbar navbar-pf-vertical">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">
      Test
    </a>
  </div>
</nav><!--/.navbar-->

<div class="nav-pf-vertical nav-pf-vertical-with-sub-menus">
  <ul class="list-group">
    <li class="list-group-item">
      <a>
        <span class="fa fa-dashboard" data-toggle="tooltip" title="Dashboard"></span>
        <span class="list-group-item-value">Dashboard</span>
      </a>
    </li>
    <li class="list-group-item">
      <a>
        <span class="fa fa-shield" data-toggle="tooltip" title="Dolor"></span>
        <span class="list-group-item-value">Dolor</span>

      </a>
    </li>
    <li class="list-group-item active secondary-nav-item-pf" data-target="#ipsum-secondary">
      <a>
        <span class="fa fa-space-shuttle" data-toggle="tooltip" title="Ipsum"></span>
        <span class="list-group-item-value">Ipsum</span>
      </a>
      <div id="-secondary" class="nav-pf-secondary-nav">
        <div class="nav-item-pf-header">
          <a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
          <span>Ipsum</span>
        </div>
        <ul class="list-group">
          <li class="list-group-item active " data-target="#ipsum-intellegam-tertiary">
            <a>
              <span...

CSS

.nav-pf-vertical .fixed-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  background: #292e34;
  border-top: 1px solid #030303;
  border-bottom: 0;
}

JavaScript

$(document).ready(function() {
  $('html').addClass('layout-pf layout-pf-fixed');

  // Initialize the vertical navigation
  $().setupVerticalNavigation(true);

  // fix scrollbar positioning
  $('.nav-pf-vertical').css('margin-bottom', $('.fixed-bottom').children().outerHeight());

  setTimeout(function() {
    $('.alert').hide();
  }, 1000);
});