How to move wordpress theme nav menu down - css

Question

I'm trying to move my nav menu down. It's currently being 75% covered by the admin bar http://3v3rivals.tk
I want to move the nav menu just below the admin bar, with little to no space between the two. I may need to move the header down a bit also.... How would I go about moving my nav menu down?
/************************************************
Main Navigation
************************************************/
#nav-logo {
float: left;
padding: 8px 10px;
max-width: 100px;
}
#nav-main-wrapper {
border-bottom: 1px solid #444;
-ms-box-shadow: 0 4px 10px -3px #000;
-moz-box-shadow: 0 4px 10px -3px #000;
-o-box-shadow: 0 4px 10px -3px #000;
-webkit-box-shadow: 0 4px 15px -5px #000;
box-shadow: 0 4px 10px -3px #000;
float: left;
margin-bottom: 1px solid #888;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
z-index: 2000;
}
#nav-main {
color: #fff;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
margin: 0 auto;
text-transform: uppercase;
width: 960px;
height: 50px;
}
ul.nav-main a {
color: #fff;
float: left;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 2px 2px 1px #000;
-ms-text-shadow: 2px 2px 1px #000;
-o-text-shadow: 2px 2px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
text-shadow: 1px 1px 1px #000;
}
ul.nav-main .menu-item-home {
background: url(images/nav-sep.png) no-repeat right bottom !important;
}
ul.nav-main .menu-item-home a {
color: #fff !important;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 1px 1px 1px #000 !important;
-ms-text-shadow: 1px 1px 1px #000 !important;
-o-text-shadow: 1px 1px 1px #000 !important;
-webkit-text-shadow: 1px 1px 1px #000 !important;
text-shadow: 1px 1px 1px #000 !important;
}
ul.nav-main a:hover {
text-decoration: none;
}
#nav-main-left {
float: left;
position: relative;
width: 810px;
}
ul.nav-main {
display: inline;
float: left;
position: relative;
max-width: 710px;
}
ul.nav-main li {
background: url(images/nav-sep.png) no-repeat right bottom;
display: inline;
float: left;
position: relative;
}
ul.nav-main .current-menu-item,
ul.nav-main .current-post-parent {
background: #eee url(images/nav-bg.png) repeat-x bottom;
}
ul.nav-main li:hover {
background: #eee url(images/nav-bg.png) repeat-x bottom !important;
}
ul.nav-main .current-menu-item a,
ul.nav-main .current-post-parent a {
color: #000;
float: left;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 1px 1px 1px #fff;
-ms-text-shadow: 1px 1px 1px #fff;
-o-text-shadow: 1px 1px 1px #fff;
-webkit-text-shadow: 1px 1px 1px #fff;
text-shadow: 1px 1px 1px #fff;
}
ul.nav-main li:hover a {
color: #000 !important;
float: left;
font: 700 14px/14px 'Open Sans Condensed', sans-serif;
padding: 18px;
-moz-text-shadow: 1px 1px 1px #fff !important;
-ms-text-shadow: 1px 1px 1px #fff !important;
-o-text-shadow: 1px 1px 1px #fff !important;
-webkit-text-shadow: 1px 1px 1px #fff !important;
text-shadow: 1px 1px 1px #fff !important;
}
ul.nav-main li ul {
display: none;
}
ul.nav-main li:hover ul {
background: #ddd url(images/striped-bg.png);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-box-shadow: 0 3px 7px -2px #333;
-ms-box-shadow: 0 3px 7px -2px #333;
-o-box-shadow: 0 3px 7px -2px #333;
-webkit-box-shadow: 0 3px 7px -2px #333;
box-shadow: 0 3px 7px -2px #333;
display: block;
padding: 5px;
position: absolute;
left: 0px;
top: 50px;
width: 150px;
}
ul.nav-main li:hover ul li {
background: #eee;
position: relative;
}
ul.nav-main li:hover ul li a {
float: left;
padding: 8px;
width: 134px;
}
ul.nav-main li:hover ul li:hover,
ul.nav-main li:hover ul li:hover.current-menu-item {
background: #fff !important;
}
ul.nav-main li:hover ul li ul {
display: none;
}
ul.nav-main li:hover ul li:hover ul {
display: block;
margin: 0;
position: absolute;
left: 150px;
top: -5px;
width: 150px;
}
#nav-mobi {
display: none;
overflow: hidden;
}
#nav-mobi select {
border: 1px solid #2d2f31;
border-radius: 3px;
color: #fff;
float: left;
margin: 10px;
padding: 0 30px 0 5px;
width: 300px;
height: 30px;
-webkit-appearance: none !important;
}
#nav-search {
float: right;
padding-top: 9px;
position: relative;
text-align: right;
width: 150px;
}
#searchform {
float: left;
position: relative;
}
#searchform input {
background: url(images/search-icon.png) no-repeat right;
border: 0;
border-bottom: 1px solid #666;
border-radius: 2px;
-moz-box-shadow: 0 2px 10px -2px #000 inset;
-ms-box-shadow: 0 2px 10px -2px #000 inset;
-o-box-shadow: 0 2px 10px -2px #000 inset;
-webkit-box-shadow: 0 2px 10px -2px #000 inset;
box-shadow: 0 2px 10px -2px #000 inset;
color: #aaa;
float: left;
font: 12px/12px helvetica, arial, sans-serif;
margin: 0 0 10px;
padding: 9px 0 9px 10px;
width: 140px;
height: 12px;
}
#searchform #search-button {
border: none;
float: left;
}
#searchform #s:focus {
outline: none;
}

Answer 1

you are using fixed position on you nav which means that it is at the very top no matter what. I think what's confusing you is that when you see the website it looks all messed up but when a non admin sees it it is fine. If you have a lot of users that will see the admin bar then you will need to use some wp logic to see if the user is logged in as an admin and if so that "top" attribute will need to be like 75px or however tall the admin bar is. Also if you want a quick dirty fix there is a plugin that hides the admin bar.