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.
Comments
Post a Comment