Transparent navbar over slider on homepage

[dqscfs]

Hi there,

this question has been asked a number of times, but the responses you provided never quite seemed to work for me: I am working on the website http://beta.dqs-cfs.com/.

On the homepage and only on the homepage, I would like the navbar to be semi-transparent (not entirely transparent) so that it overlaps with the slider. On scrolling, however, the navbar should become white.

In short it should behave like on this page: http://dqs.com.tr/

How do I do this?

Thanks and best,
Thijs

[Joao]

Hi There,

Please add the following code to Theme Options CSS

.x-navbar-scrolled .desktop .x-nav > li > a > span {
    color: white;
}


.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
    color: white;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
  margin-bottom: 0;
}
@media (min-width: 980px) {
	.x-slider-container.below {
		margin-top: -75px;
	} 
}

.x-main.full {
    margin-top: -91px;
}
.x-navbar  {
  border-bottom: 0px !Important;
  box-shadow: none; !important;
}

Add the following code to Theme Option Javascript:

jQuery(document).ready(function($){
  $(' .x-navbar-fixed-top').css("background-color", "51,51,51,0.45");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $(' .x-navbar-fixed-top').css("background-color", "rgba(51,51,51,1)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $(' .x-navbar-fixed-top').css("background-color", "rgba(51,51,51,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $(' .x-navbar-fixed-top').css("background-color", "rgba(51,51,51,0.65)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $(' .x-navbar-fixed-top').css("background-color", "rgba(51,51,51,0.55)").css("transition","0.3s ease-in-out ");
   } else {
    $(' .x-navbar-fixed-top').css("background-color", "51,51,51,0.45").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $(' .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $(' .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

Please adjust the background color on rgba on your JS Code.

Adjust the link colors and other parameters on CSS code.

Hope it helps!