Transparent Nav Bar over slider

Hi Bernard,

I have made tests and I have found a quick solution. You have to edit the file custom.js (folder js) and the file style.css (folder css).

In the file custom.js you have to change the code from the line 198 to the end. You have to type the next code:

jQuery(function() {
	var bar = jQuery('nav');
	var top = bar.css('top');
	var ww = jQuery(window).width();
	var navigationHeight = -jQuery('.collapse').height();
	var mobileTop = Math.floor(navigationHeight - 60);
	
	jQuery(window).scroll(function() {
		var homepageHeight = $('#homepage').height();
		if(jQuery(this).scrollTop() < homepageHeight) {
			bar.addClass('navbar-fixed-top');
		} else {
			bar.removeClass('navbar-fixed-top');
			if(ww < 768) {
					bar.stop().animate({top : mobileTop}, 600);
			} else {
				bar.stop().animate({top : top}, 300);
			}
		}  
	});
});

And in the file style.css you have to edit the class nav.navbar-fixed-top (about the line 348) to this:

nav.navbar-fixed-top{
	background: transparent;
	border-bottom: 0px !important;
}

And you have to add the next classes too:

nav.navbar-fixed-top li a {
	color:#FFF;
	text-shadow: none;
}

nav.navbar-fixed-top .logo{
	color: #FFF;
}

nav,
nav.navbar-fixed-top,
nav.navbar-fixed-top li a,
nav.navbar-fixed-top .logo {
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Regards

You’re welcome 😉