title: Bootstrap 3 Affix Header and Menu
body: <p>I have searched for and can't get the right solution</p>
  
  <p>I got this far from the following post: 
  <a href="https://stackoverflow.com/questions/16906375/bootstrap-how-to-add-multiple-add-affix-attribute">Bootstrap. How to add multiple add affix attribute?</a>
  using Multiple Affix attributes</p>
  
  <p>Please can someone help me with two problems:</p>
  
  <p><strong>PROBLEM 1:</strong></p>
  
  <p><a href="http://jsfiddle.net/Spiral57/b9xTs/" rel="nofollow noreferrer">http://jsfiddle.net/Spiral57/b9xTs/</a></p>
  
  <pre><code>#affix1.affix {
      position: fixed; 
      background-color: #000;
      width: 100%;
      top: -10px; 
      z-index:1030;
  }
  
  #affix2.affix {
      position: fixed; 
      width: 100%;
      background-color: #000;
      top: 105px; 
      z-index:1030;
  }
  
  #affix3.affix {
      position: fixed; 
      width: 100%;
      background-color: #000;
      top: 155px; 
      z-index:1030;
  }
  
  @media (max-width: 767px) {
      #affix3.affix {
          position: fixed; 
          width: 100%;
          background-color: #000;
          top: 330px; 
          z-index:1030;
      }
  }
  </code></pre>
  
  <p>I need the header, navbar and navwrapper to be fixed to the top, maintaining a BLACK background.</p>
  
  <p><strong>PROBLEM 2</strong></p>
  
  <p><a href="http://jsfiddle.net/Spiral57/wnbFf/" rel="nofollow noreferrer">http://jsfiddle.net/Spiral57/wnbFf/</a></p>
  
  <pre><code>#affix4.affix {
      position: fixed; 
      background-color: #fff;
      right: 15px;
      top: -10px; 
      z-index:1030;
  }
  
  
  #affix5.affix {
      position: fixed; 
      width: 100%;
      background-color: #fff;
      top: 105px; 
      z-index:1030;
  }
  
  #affix6.affix {
      position: fixed; 
      width: 99%;
      background-color: #fff;
      top: 155px; 
      z-index:1030;
  }
  
  @media (max-width: 767px) {
      #affix6.affix {
          position: fixed; 
          width: 92%;
          background-color: #fff;
          top: 330px; 
          z-index:1030;
      }
  }
  </code></pre>
  
  <p>I need the header, navbar and navwrapper to be fixed to the top, maintaining a WHITE background.
  With this, I need the logo to remain on the right hand side.</p>