title: How to create a sticky navigation bar that becomes fixed to the top after scrolling
body: <p>I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top.  I'm using Bootstrap, just like this site, but I can't figure out how this site did it.  Any help?</p>
  
  <p>Here's the site with the nav bar I'm trying to emulate: <a href="http://www.blastprocessor.co.uk/" rel="noreferrer">http://www.blastprocessor.co.uk/</a></p>
  
  <p>Here's my navigation html and css code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="navbar navbar-fixed-top" id="navbar"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;div class="nav-collapse"&gt;
                  &lt;ul class="nav nav-pills"&gt;
                      &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#service-link"&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#contact-link"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;&lt;!-- /.nav --&gt;
              &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;&lt;!-- /.container --&gt;
      &lt;/div&gt;&lt;!-- /.navbar-inner --&gt;
  &lt;/div&gt;&lt;!-- /.navbar --&gt;
  </code></pre>
  
  <p>And here's my CSS:</p>
  
  <pre><code>.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
  .navbar .nav &gt; li a{
      color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
  }
  .navbar .nav &gt; .active a:hover, .navbar .nav &gt; li a:hover, .navbar .nav &gt; .active a {
      color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
  }
  .navbar .nav &gt; li {padding:2em;}
  .navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
  .navbar .nav, .navbar .nav &gt; li {
      float:none;
      display:inline-block;
      *display:inline; /* ie7 fix */
      *zoom:1; /* hasLayout ie7 trigger */
      vertical-align: top;
      padding:0 2em;
  }
  .navbar-inner {text-align:center;}
  .navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
  </code></pre>