Different background colors for main and secondary menus on transparent pages

Hello
For transparent pages, I’ve tried a bunch of code (see below – more there than needed but commented out to what almost works), but would like to control the color of the secondary menu and the main menu as unique BOTH before and after scrolling. Eg, (just working settings), I’d like to have this:

BEFORE SCROLLING
Secondary menu background is white
Main menu background is black

AFTER SCROLLING (reverse the colors)
Secondary menu background is black
Main menu background is white

Here’s my working code – I’ve managed to target secondary before and after scrolling, but can’t target the main menu after scrolling. Also, a 1px line appears on scrolling and I can’t find the element to hide that as well. My working page is in the private section. Thank you! :)

/* TRANSPARENT HEADERS ***************************************/

/* main & sec menu before scrolling - covered with #header_main - default is transparent  */

header#header.av_header_transparency {
    /* background: black; */
	/* background: transparent; */
	/* background-color: rgba(0,0,0,0.7); */
}   

/* sec menu after scrolling */

.html_header_transparency #header_meta {
    background: black;
}

/* main menu before and after scrolling */

#header_main {
	background: black;
    /* background: rgba(0,0,0,0.3); */
    /* background-color: rgba(0,0,0,0.7); */
	border-bottom-width: 0px !important;	
}

/* main & sec menu before scrolling */

#top .av_header_transparency {
	background: white;
}

/* main & sec menu before & after scrolling */

#top #header .header_bg {
	/* background: red !important; */
	/* opacity: 1; */
	/* border-bottom-width: 0px !important; */
    /* background: transparent;
    opacity: 0;
    filter: alpha(opacity=0); */
}