Slider behind menu and logo

Good night all,

i’m having some issues trying to put the slider behind the menu and the logo (both are transparent). what im looking to do is like the menu in this webpage ()

what i have now, seeing it in layers is

1.Masthead background
2.Slider
3.Logo – Transparent background
4. Menu – Transparent Background

But is like if i need to add a background above the Masthead Background to get the same transparent color in the header and menu.

Also i have a spacing between the header and menu that i cant get rid of it.

The custom css code that i’m using is:

/* Vantage menu opacity */

.main-navigation {
zoom: 1;
filter:(opacity=70);
opacity: 0.7;
}

/*vantage slider behind menu*/
.site-header {
position: absolute;
left: 0;
right: 0;

}

.hgroup, .main-navigation {
z-index: 400;
}
/*
#sticky-container .main-navigation {
background: rgba(52,53,56,.5) !important;
}

.main-navigation {
background: none !important;
}
*/
.site-main {
padding: 0 35px !important
}

.siteorigin-panels-stretch.panel-row-style {
padding-top: 0px!important;
}

Thank you in advance

Alex