Currently, my navigation bar stays static at the left side of the browser window. I want it to left align with the rest of the site which auto-centers with the browser window (but still keep the nav bar background fully extended to the sides of the browser window). Here is the site:
http://mysportsrehab.com/wordpress/
And here is the current CSS:
/* Nav
---------------------------------------------------------------- */
#nav{
border-bottom-style: inherit;
height: 36px;
text-transform: capitalize;
}
.menu-main-container, .menu{margin:0 auto; width:960px;}
#nav li a .sf-sub-indicator{
width: 11px;
height: 32px;
top: 18px;
right: 0px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
}
#nav li a:hover .sf-sub-indicator{
}
#nav li li a .sf-sub-indicator {
top: 12px;
}
#nav ul {
float:left;
list-style: none;
margin: 0;
}
#nav .sub-menu {
}
#nav .sub-menu .sub-menu{
background: transparent !important;
}
#nav li {
float:left;
list-style: none;
padding: 0;
}
#nav li a {
display: block;
font-family: Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-size: 13px;
font-weight: 400;
line-height: 20px;
margin: 0;
padding: 8px 15px 8px 13px;
position: relative;
text-decoration: none;
}
#nav .current-menu-item a {
}
#nav li a:hover, #nav li a:active {
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font-size:12px;
line-height: 20px;
width: 132px;
margin: 0;
padding:7px 21px 7px 13px;
text-transform:capitalize;
border-bottom:1px solid #0197b2;
position: relative;
}
#nav li li a:hover, #nav li li a:active {
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 166px;
margin: 0;
padding: 0;
}
#nav li ul ul {
margin: -35px 0 0 166px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfHover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul {
left: auto;
}
#nav li:hover, #nav li.sfHover {
position: static;
}
#nav li a span {
color:#999;
display: block;
font-size: 10px;
line-height: 14px;
}