Slider behind Logo and Navigation

I have it set to transparent and I have set header to transparent for the homepage but still does not show that way:

http://hobart-design.com/mystic/

I upgraded and that didn’t change it, but this custom CSS worked great. One more quick item and this will be done. Is there a way not to make the header background semi-transparent? So, say we want white background with a 50% opacity so yu can still see the image but the menu doesn’t get lost?

Thank you so much! That did exactly what I needed. This theme is awesome.

One more tweak and I am done with this project. Is there an easy CSS for making a vertical separation line between menu items like this:

http://hobart-design.com/clients/header.jpg

Thanks Ismael, Your help is greatly appreciated. This worked great, however, we have the sticky header and when it shrinks down when scrolling the lines are absolute positioned.

this is the complete code i have that you can see here: hobart-design.com/mystic, it still seems to stay in place without shrinking after scrolling down:
#top .av_header_transparency .header_bg {
background: rgba(255,255,255,0.85) !important;
}
.html_header_top.html_header_sticky .home #wrap_all #main {
padding-top: 0 !important;
}

#top .av-main-nav ul a {
font-size: 16px;
}

#top .av-main-nav a {
font-size: 12px;
}
body {
font-size: 13px;
}
.av-main-nav > li > a:after {
content: ”;
display: block;
width: 1px;
height: 60px;
background: #c7c5c7;
position: absolute;
top: 60px;
left: -2px;
}
.header-scrolled .av-main-nav > li > a:after {
top: 100px !important;
}

Thanks, Sorry I had it at 20 and saved and didn’t seem to change anything so I was messing with the margins to see if it made a difference and it didn’t. I just resaved it and works fine. Thanks for your help. Your support is top notch!