Split menu with background color and logo link

Client wanted a split menu and I found the code to do it here: https://kriesi.at/support/topic/logo-center-menu-left-and-right-2/#post-724306

Works great! http://siteforstaging.com

But…it appears that the logo is “behind” the menu so the logo isn’t linking to the Home page except at the very top of the logo.

Also, I’d like to put some very light color behind the menu/logo so it stands out a bit more when scrolling down. (Right now I have a border-bottom)

Can someone help me with this? Thanks!
Melodee

Code I’m using:
/* Split menu —————-*/
@media only screen and (min-width:768px) {
.av-main-nav li:nth-child(3) {
margin-right:300px;
}
.av-logo-container {
position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
}
#header {
margin-top: 30px;
}
}
/* Split menu – change line-height ——-*/
.html_header_top .av_bottom_nav_header #header_main_alternate .main_menu ul:first-child > li > a {
height: 50px;
line-height: 20px;
padding-top: 20px
}
.html_header_top.html_bottom_nav_header #header_main_alternate .main_menu > div {
width: 100%;
height: 100px;
}
/* Add border bottom to menu so it can be seen when scrolling —–*/
.av_minimal_header #header_main_alternate {
border-bottom: 4px solid #708A9C;
}