JSFiddle - React, Tailwind, and code Playground

by Nicholas Pappas

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!-- Navigation Bar -->
<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-bars fa-lg"></i>
      </button>
      <a class="navbar-brand" href="/"><i class="fa fa-flag"></i> Site Banner</a>
    </div>

    <nav class="navbar-collapse collapse" role="navigation">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Home</a></li>
        <li class=""><a href="/">Page1</a></li>
        <li class=""><a href="/">Page2</a></li>
        <li class=""><a href="/">Page3</a></li>
        <li class=""><a href="/">Page4</a></li>  
      </ul>
    </nav>
  </div>
</div>

<div class="jumbotron hidden-print">
  <div class="container">
    <h1>Page Title</h1>
    <p>Page Subtitle</p>
  </div>
</div>

<div class="container">
  <div>
    <div class="col-md-2" role="complementary">
      <div class="hig-sidebar hidden-print hidden-sm hidden-xs" role="complementary" data-spy="affix" data-offset-top="310">
        <ul class="nav hig-sidenav">
          <li>
            <a href="#overview">Overview</a>
            <ul class="nav">
              <li>blah</li>
              <li>blah</li>
            </ul>
          </li>
          <li><a href="#typography">Typography</a></li>
          <li><a href="#imagery">Imagery</a></li>
          <li><a href="#Grid">Grid</a></li>
          <li><a href="#Color">Color</a></li>
        </ul>
      </div>
    </div>

    <div class="col-md-10 col-xs-12" role="main">
      <div class="hig-section">
        <h1 id="overview" class="section-header">Overview</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id ligula pulvinar, ultrices odio nec, sollicitudin arcu. Curabitur congue...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');


.affix {
  position: fixed;
  top: 20;
}


.jumbotron:after, .navbar-inverse:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.15; }

body {
  margin: 0; }

.jumbotron {
  background-color: #be0f34;
  border-top: 1px solid #df4566;
  border-bottom: 1px solid #7c051e;
  color: #fff;
  margin: bottom;
  padding: 50px 0;
  position: relative; }
  .jumbotron .contrainer {
    position: relative;
    z-index: 1; }
  .jumbotron h1 {
    color: #fff;
    font-size: 100px;
    margin: 0 0 15px;
    text-shadow: 4px 3px 0 #df4566, 9px 8px 0 rgba(0, 0, 0, 0.15); }

.navbar {
  border: 1px solid transparent;
  margin-bottom: 0px;
  min-height: 40px; }

.navbar-inverse {
  background-color: #be0f34;
  border-color: #7c051e;
  position: relative; }
  .navbar-inverse .container {
    position: relative;
    z-index: 1; }
  .navbar-inverse .navbar-brand {
    color: #fff;
    padding: 10px 15px; }
  .navbar-inverse .navbar-nav > .active > a,
  .navbar-inverse .navbar-nav > .active > a:hover,
  .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #7c051e; }
  .navbar-inverse .navbar-nav > li > a {
    color: #df4566;
    padding-top: 10px;
    padding-bottom: 10px; }
  .navbar-inverse .navbar-toggle {
    color: #fff;
    border-color: #fff;
    padding: 4px 10px;
    margin-top: 5px;
    margin-bottom: 5px; }

.navbar-collapse {
  border-top: 0; }

.navbar-static-top {
  border-width: 0 0 1px 0; }

JavaScript

//$('.hig-sidebar').affix({
//  offset: {
//    top: function() { $('.navbar-static-top').height() + $('.jumbotron').height() }
//  }
//});