/* The navigation bar */
.span12 widget-span widget-type-cell navbar {width: 100%;}
.navbar {
background:transparent;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
left:0;
margin: 0px;
padding:10px 70px 10px 10px;
width: 100%; /* Full width */
right:0;
}
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 300) {
$(".navbar").css("background" , "black");
}
else{
$(".navbar").css("background" , "transparent");
}
})
})
</script>
Its, transparent while on the image (it includes the social media icons, the logo, speakers, etc,) The code is supposed to make it fixed and the make it black upon scrolling.