title: How to stick a background behind the navbar?
body: <p>I have a problem here.
  I'm using wordpress and I was confused.
  How to stick background behind the nav bar?.
  I activated LowerMedia Sticky.js menu's plugin, then I want to change my navbar background color. I try to add a <code>background: #000;</code> in <code>#navigation</code>. It's look okay, but when I scroll down, the navigation background is not move. There's only the navigation text that moved. I try to move <code>background: #000;</code> to <code>#navigation .sf-menu a</code> but the background is only appear around the text, even it move with the text when I scroll down. I don't know what to do now. Please help me. Thanks before.</p>
  
  <p>This is my site : <a href="http://www.vitraprawira.net" rel="nofollow">vitraprawira.net</a></p>
  
  <p>This is my final navbar css code:</p>
  
  <pre><code>/* Main Navigation
  
  ================================================== */
  /*hide responsive nav*/
  
  #top-bar .selector, #navigation .selector { display: none; }
  
  /*core*/
  
  .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
  
  .sf-menu { line-height: 1.0 }
  
  .sf-menu ul { position: absolute; top: -999em; width: 180px; }
  
  .sf-menu ul li { width: 100% }
  
  .sf-menu li:hover { visibility: inherit }
  
  .sf-menu li { float: left; position: relative; }
  
  .sf-menu a { display: block; position: relative; }
  
  .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0px; top: 30px; z-index: 99; }
  
  ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em }
  
  ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 180px; top: 1px; }
  
  /*styling*/
  
  
  #navigation-wrap { position: relative; display: block; }
  
  #navigation { margin-left: 170px; margin-right: auto; position: relative; height: 55px; transparent: none; }
  
  #navigation .sf-menu &gt; li:hover &gt; ul, .sf-menu li.sfHover &gt; ul { top: 50px }
  
  #navigation ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul, ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 200px; top: 0; }
  
  #navigation .sf-menu a { font-size: 1.000em; height: 55px; line-height: 55px; color: #fff;  background: #000 url("images/vintage.png"); }
  
  #navigation .sf-menu &gt; li &gt; a { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
  
  #navigation .sf-menu li { float: left; position: relative; }
  
  #navigation .sf-menu &gt; li { background: url("images/dash.png") right center no-repeat; margin-right: 20px; padding-right: 20px; }
  
  #navigation .sf-menu &gt; li:last-child { margin: 0; padding: 0; }
  
  #navigation .sf-menu &gt; li &gt; a:hover { color: #fff }
  
  #navigation .sf-menu &gt; .current-menu-item &gt; a { color: #7094DB }
  
  #navigation .sf-menu &gt; li.sfHover &gt; a { color: #fff }
  
  /*drop-down styles*/
  
  #navigation .sf-menu ul { position: absolute; nowhitespace: afterproperty; top: -999em; width: 200px; z-index: 9999; left: 0; border: 1px solid #ddd; box-shadow: 0 0 8px rgba(0,0,0,0.08); }
  
  #navigation .sf-menu ul &gt; li:last-child { -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; }
  
  #navigation .sf-menu ul li { background: #000; border-bottom: 1px solid rgba(0,0,0,0.05); }
  
  #navigation .sf-menu ul li:first-child { border-top: 0 }
  
  #navigation .sf-menu ul li:last-child { border-bottom: 0 }
  
  #navigation .sf-menu ul a { display: block; padding: 10px; color: #fff; height: auto; margin: 0px; border: 0px; line-height: 1.8em; font-size: 0.923em; text-shadow: none; }
  
  #navigation .sf-menu ul li &gt; a:hover { color: #7094DB; background: #2D3B58; }
  </code></pre>