title: How to create fixed vertical navigation?
body: <p>I'm using a html theme for my website, and I need to add a fixed vertical menu to the left. </p>
  
  <p>I've tried <a href="http://codyhouse.co/gem/vertical-fixed-navigation/" rel="nofollow">this tutorial</a> for this, (<a href="http://codyhouse.co/demo/vertical-fixed-navigation/index.html" rel="nofollow">demo</a>), and it uses a modernizr javascript that might not be similar to what I'm using. : <a href="http://codyhouse.co/demo/vertical-fixed-navigation/js/modernizr.js" rel="nofollow">Tutorial Version</a> of Modernizr, &amp; My <a href="https://dl.dropboxusercontent.com/u/27854284/Stuff/modernizr.js" rel="nofollow">html theme's version</a></p>
  
  <p>I followed the tutorial, and add only the <code>NAV</code> div to my html theme (no <code>sections</code>)... I couldn't get the nav to appear as shown on the demo... </p>
  
  <p>EDIT:</p>
  
  <p>I have edited the snippet... now the side-menu is showing, but it's on the right, and with bullets+dots.. Could someone help me out to remove the bullets, and keep only the dots (dark pink dots)... Also, could the menu be placed on the left? </p>
  
  <p>Also, any info on what all components could be removed safely from the css? I'm not sure if all of those components are required... although the menu wasn't showing without this updated css.. I had initially copied the css from the tutorial, only now have I copied the exact contents of the <code>style.css</code> from the demo source...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* -------------------------------- 
   
  Primary style
   
  -------------------------------- */
  html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
   
  *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
   
  body {
    font-size: 100%;
    font-family: "Ubuntu", sans-serif;
    color: #3e3947;
    background-color: white;
  }
   
  body, html {
    height: 100%;
  }
   
  a {
    color: #3e3947;
    text-decoration: none;
  }
   
  img {
    max-width: 100%;
  }
   
  /* -------------------------------- 
   
  Modules - reusable parts of our design
   
  -------------------------------- */
  .cd-img-replace {
    /* replace text with a background-image */
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
   
  /* -------------------------------- 
   
  xnugget info 
   
  -------------------------------- */
  .cd-nugget-info {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 50px;
    line-height: 50px;
    top: 0;
    left: 0;
  }
  .cd-nugget-info a {
    position: relative;
    font-size: 14px;
    color: #d88683;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
  }
  .no-touch .cd-nugget-info a:hover {
    opacity: .8;
  }
  .cd-nugget-info span {
    vertical-align: middle;
    display: inline-block;
  }
  .cd-nugget-info span svg {
    display: block;
  }
  .cd-nugget-info .cd-nugget-info-arrow {
    fill: #d88683;
  }
   
  /* -------------------------------- 
   
  xcarbonads 
   
  -------------------------------- */
  #carbonads-container {
    position: fixed;
    right: 40px;
    top: 40px;
    width: 180px;
    display: none;
    z-index: 1;
  }
  #carbonads-container .close-carbon-adv {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 100%;
    background: rgba(0, 0, 0, 0.8);
    text-indent: 100%;
    overflow: hidden;
    width: 32px;
    height: 32px;
    border-radius: 3px 0 0 3px;
  }
  #carbonads-container .close-carbon-adv:hover {
    background: #000;
  }
  #carbonads-container .close-carbon-adv::after, #carbonads-container .close-carbon-adv::before {
    content: '';
    background-color: #fff;
    height: 2px;
    width: 14px;
    position: absolute;
    top: 14px;
    left: 9px;
  }
  #carbonads-container .close-carbon-adv::after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #carbonads-container .close-carbon-adv::before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #carbonads-container .carbonad {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 100%;
    height: auto;
    padding: 14px;
    text-align: center;
    border-radius: 0 3px 3px 3px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  #carbonads-container .carbonad .carbonad-image img {
    margin: 0 0 10px 10px;
  }
  #carbonads-container .carbonad .carbonad-text, #carbonads-container .carbonad .carbonad-tag {
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }
  #carbonads-container .carbonad .carbonad-text {
    display: block;
    width: 100%;
    padding: 0;
  }
  #carbonads-container .carbonad .carbonad-text a {
    color: #d88683;
    font-size: 13px;
    font-weight: bold;
  }
  .no-touch #carbonads-container .carbonad .carbonad-text a:hover {
    text-decoration: underline;
  }
  #carbonads-container .carbonad .carbonad-tag {
    margin-top: 5px;
    color: #3a393f;
  }
  #carbonads-container .carbonad .carbonad-tag a {
    color: #3a393f;
  }
  #carbonads-container .carbonad .carbonad-tag a:hover {
    color: #d88683;
  }
  @media only screen and (min-width: 1170px) {
    #carbonads-container {
      display: block;
    }
  }
   
  /* -------------------------------- 
   
  Main components 
   
  -------------------------------- */
  .cd-section {
    min-height: 100%;
    position: relative;
    padding: 2em 0;
  }
  .cd-section:nth-of-type(odd) {
    background-color: #3e3947;
  }
  .cd-section:nth-of-type(odd) p {
    color: #898099;
  }
  .cd-section:nth-of-type(even) {
    background-color: #745360;
  }
  .cd-section:nth-of-type(even) p {
    color: #bda3ad;
  }
  .cd-section h1, .cd-section p {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 90%;
    max-width: 768px;
    text-align: center;
  }
  .cd-section h1 {
    color: white;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 20px;
    font-size: 1.25rem;
  }
  .cd-section p {
    line-height: 1.6;
  }
  @media only screen and (min-width: 768px) {
    .cd-section h1 {
      font-size: 30px;
      font-size: 1.875rem;
    }
    .cd-section p {
      font-size: 20px;
      font-size: 1.25rem;
      line-height: 2;
    }
  }
   
  .cd-scroll-down {
    position: absolute;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 20px;
    width: 38px;
    height: 44px;
    background: url("../img/cd-arrow-bottom.svg") no-repeat center center;
  }
   
  /* No Touch devices */
  .cd-nav-trigger {
    display: none;
  }
   
  .no-touch #cd-vertical-nav {
    position: fixed;
    right: 40px;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
  }
  .no-touch #cd-vertical-nav li {
    text-align: right;
  }
  .no-touch #cd-vertical-nav a {
    display: inline-block;
    /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .no-touch #cd-vertical-nav a:after {
    content: "";
    display: table;
    clear: both;
  }
  .no-touch #cd-vertical-nav a span {
    display: inline-block;
    float: right;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
  }
  .no-touch #cd-vertical-nav a:hover span {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  .no-touch #cd-vertical-nav a:hover .cd-label {
    opacity: 1;
  }
  .no-touch #cd-vertical-nav a.is-selected .cd-dot {
    background-color: white;
  }
  .no-touch #cd-vertical-nav .cd-dot {
    position: relative;
    top: 8px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #d88683;
    -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
    -moz-transition: -moz-transform 0.2s, background-color 0.5s;
    transition: transform 0.2s, background-color 0.5s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  .no-touch #cd-vertical-nav .cd-label {
    position: relative;
    margin-right: 10px;
    padding: .4em .5em;
    color: white;
    font-size: 14px;
    font-size: 0.875rem;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }
   
  /* Touch devices */
  .touch .cd-nav-trigger {
    display: block;
    z-index: 2;
    position: fixed;
    bottom: 30px;
    right: 5%;
    height: 44px;
    width: 44px;
    border-radius: 0.25em;
    background: rgba(255, 255, 255, 0.9);
  }
  .touch .cd-nav-trigger span {
    position: absolute;
    height: 4px;
    width: 4px;
    background-color: #3e3947;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  .touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    background-color: inherit;
    border-radius: inherit;
  }
  .touch .cd-nav-trigger span::before {
    top: -9px;
  }
  .touch .cd-nav-trigger span::after {
    bottom: -9px;
  }
   
  .touch #cd-vertical-nav {
    position: fixed;
    z-index: 1;
    right: 5%;
    bottom: 30px;
    width: 90%;
    max-width: 400px;
    max-height: 90%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    border-radius: 0.25em;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .touch #cd-vertical-nav a {
    display: block;
    padding: 1em;
    border-bottom: 1px solid rgba(62, 57, 71, 0.1);
  }
  .touch #cd-vertical-nav a span:first-child {
    display: none;
  }
  .touch #cd-vertical-nav a.is-selected span:last-child {
    color: #d88683;
  }
  .touch #cd-vertical-nav.open {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  .touch #cd-vertical-nav.open + .cd-nav-trigger {
    background-color: transparent;
  }
  .touch #cd-vertical-nav.open + .cd-nav-trigger span {
    background-color: rgba(62, 57, 71, 0);
  }
  .touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
    background-color: #3e3947;
    height: 3px;
    width: 20px;
    border-radius: 0;
    left: -8px;
  }
  .touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 1px;
  }
  .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    bottom: 0;
  }
  .touch #cd-vertical-nav li:last-child a {
    border-bottom: none;
  }
   
  @media only screen and (min-width: 768px) {
    .touch .cd-nav-trigger, .touch #cd-vertical-nav {
      bottom: 40px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://dl.dropboxusercontent.com/u/27854284/Stuff/modernizr.js"&gt;&lt;/script&gt;
  &lt;script src="http://codyhouse.co/demo/vertical-fixed-navigation/js/main.js"&gt;&lt;/script&gt;
  
  
  &lt;nav id="cd-vertical-nav"&gt;
    &lt;ul&gt;
     &lt;li&gt;
      &lt;a href="#section1" data-number="1"&gt;
       &lt;span class="cd-dot"&gt;&lt;/span&gt;
       &lt;span class="cd-label"&gt;Intro&lt;/span&gt;
      &lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
      &lt;a href="#section2" data-number="2"&gt;
       &lt;span class="cd-dot"&gt;&lt;/span&gt;
       &lt;span class="cd-label"&gt;About&lt;/span&gt;
      &lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
      &lt;a href="#section3" data-number="3"&gt;
       &lt;span class="cd-dot"&gt;&lt;/span&gt;
       &lt;span class="cd-label"&gt;Features&lt;/span&gt;
      &lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
      &lt;a href="#section4" data-number="4"&gt;
       &lt;span class="cd-dot"&gt;&lt;/span&gt;
       &lt;span class="cd-label"&gt;Portfolio&lt;/span&gt;
      &lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
      &lt;a href="#section5" data-number="5"&gt;
       &lt;span class="cd-dot"&gt;&lt;/span&gt;
       &lt;span class="cd-label"&gt;Pricing&lt;/span&gt;
      &lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
      &lt;a href="#section6" data-number="6"&gt;
       &lt;span class="cd-dot"&gt;&lt;/span&gt;
       &lt;span class="cd-label"&gt;Contact&lt;/span&gt;
      &lt;/a&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/nav&gt;
   &lt;a class="cd-nav-trigger cd-img-replace"&gt;Open navigation&lt;span&gt;&lt;/span&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>