css - How to stick a background behind the navbar? -

i have problem here. i'm using wordpress , confused. how stick background behind nav bar?. activated lowermedia sticky.js menu's plugin, want change navbar background color. try add background: #000; in #navigation. it's okay, when scroll down, navigation background not move. there's navigation text moved. try move background: #000; #navigation .sf-menu a background appear around text, move text when scroll down. don't know now. please me. before.

this site : vitraprawira.net

this final navbar css 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 { 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 > li:hover > ul, .sf-menu li.sfhover > 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 { font-size: 1.000em; height: 55px; line-height: 55px; color: #fff;  background: #000 url("images/vintage.png"); }  #navigation .sf-menu > li > { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }  #navigation .sf-menu li { float: left; position: relative; }  #navigation .sf-menu > li { background: url("images/dash.png") right center no-repeat; margin-right: 20px; padding-right: 20px; }  #navigation .sf-menu > li:last-child { margin: 0; padding: 0; }  #navigation .sf-menu > li > a:hover { color: #fff }  #navigation .sf-menu > .current-menu-item > { color: #7094db }  #navigation .sf-menu > li.sfhover > { 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 > 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 { 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 > a:hover { color: #7094db; background: #2d3b58; } 

if you're wanting color/image appear behind entire menu block, you're localizing background close anchor element.

just this: #navigation {background: #ccc;} or whatever color want.