set transparent menu over background image

HTML

<div class="banner-top"></div>

<div class="header-wrap">
	<div class="row">
		<div class="large-4 columns">
			<div class="site-branding">
				<div class="site-title">
					<a href="#" rel="home">Test Themes</a>
				</div>
				<div class="site-description">
					Just another .. site
				</div>
			</div>
			<!-- .site-branding -->
		</div>
		<div class="large-8 columns">
			<nav id="site-navigation" class="main-navigation">
			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
			<div class="menu-menu-1-container">
				<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
					<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="#">Home</a></li>
					<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-10"><a href="#">About</a>
					<ul class="sub-menu">
						<li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a href="#">About</a></li>
					</ul>
					</li>
				</ul>
			</div>
			</nav>
			<!-- #site-navigation -->
		</div>
	</div>
</div>

CSS

/* Menu Dropdown*/

.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	color:#FFF;
	font-family: "Nunito", sans-serif;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}
	/* Menu Dropdown*/

		.banner-top {
			background:#1a69ad url("../images/bokeh-2300039_1200.jpg") center no-repeat;
			background-size:cover;
			position:fixed;
			height:100%;
			width:100%;
			top:0;
			z-index:-1;
			margin-top:-135px;
		}
		.header-wrap {
			background:rgba(0,0,0,0.5);
			padding:30px 0;
		}
		.site-title a {
			font-size:34px;
			font-family: "Raleway", sans-serif;
			color:#FFF;
			font-weight:300;
			text-decoration: none;
		}
		.site-description {
			color:#E0E0E0;
			font-family: "Raleway", sans-serif;
		}
		.main-navigation a {
			font-family: "Nunito Sans", sans-serif;
			color:#FFF;
			font-weight:700;
			font-size:16px;
		}
		.main-navigation li.menu-item a {
			display:inline-block;
			padding:10px 15px;
		}
		.main-navigation ul li.menu-item:hover a {
			background:rgba(0,0,0,0.1);
		}
		.main-navigation a:hover {
			background:rgba(0,0,0,0.1);
		}
		.site-content {
			margin-top:50px;
		}

Scripts

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700|Raleway:300" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>

Javascript

$(document).ready(function(){
});